{"_id":"@bentoproject/accordion","_rev":"202-cce30989ad24d8d32823978450eff59a","name":"@bentoproject/accordion","dist-tags":{"nightly":"1.2302271541.0","latest":"1.2302271541.0"},"versions":{"1.2110261518.0":{"name":"@bentoproject/accordion","version":"1.2110261518.0","description":"AMP HTML amp-accordion Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-7+c3BWmmEDKCiap5o74HU0JuXoti9den4Xnv/rGB8lZ/CTF0RWUWEU65FnZNM9WGFv3P7PkTsIYG/QGIh6udpA==","shasum":"24f5671cc20307f9a5ad3c02a40c5d3daa265fae","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2110261518.0.tgz","fileCount":28,"unpackedSize":2021983,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeM14IEXp/3OHZaS00VIrBz4R8x1YcF85Tz5TkY70deAIhAJE2VlewdRB/Sd8zFMxM1gIXmndQttU5yfDYlG58mtNK"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2110261518.0_1635445073051_0.020643153063328867"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/accordion","version":"1.2110252343.0","description":"Bento accordion Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nThe Bento Accordion component allows you to display collapsible and expandable\ncontent sections. This component provides a way for viewers to glance at the\ncontent outline and jump to any section. Effective use reduces scrolling needs\non mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct\n    children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the\n    Bento Accordion. It must be a heading element such as `<h1>-<h6>` or\n    `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded\n    state of each section while the user remains on your domain.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-accordion>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-accordion` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n  ></script>\n  <link\n    rel=\"stylesheet\"\n    type=\"text/css\"\n    href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n  />\n</head>\n<body>\n  <bento-accordion id=\"my-accordion\" disable-session-states>\n    <section>\n      <h2>Section 1</h2>\n      <p>Content in section 1.</p>\n    </section>\n    <section>\n      <h2>Section 2</h2>\n      <div>Content in section 2.</div>\n    </section>\n    <section expanded>\n      <h2>Section 3</h2>\n      <div>Content in section 3.</div>\n    </section>\n  </bento-accordion>\n  <script>\n    (async () => {\n      const accordion = document.querySelector('#my-accordion');\n      await customElements.whenDefined('bento-accordion');\n      const api = await accordion.getApi();\n\n      // programatically expand all sections\n      api.expand();\n      // programatically collapse all sections\n      api.collapse();\n    })();\n  </script>\n</body>\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n##### Actions\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n##### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n**expand**\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n**collapse**\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n#### Attributes\n\n##### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\"\nanimation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n##### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n##### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n#### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion\nfreely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>`\n    element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot\n    have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements\n    are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoAccordion>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n##### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n**onExpandStateChange**\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee below for example.\n\n**onCollapse**\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n#### Props\n\n##### BentoAccordion\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section\nDefault: `false`\n\n###### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections:\nDefault: `false`\n\n##### BentoAccordionSection\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section\nDefault: `false`\n\n###### expanded\n\nIf true, expands the section.\nDefault: `false`\n\n###### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n##### BentoAccordionHeader\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n##### BentoAccordionContent\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"57e62ecc0e24bc2cd64467dba9d0f9836eea0182","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2110252343.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-M81trpzk50kJ74ulQXxV4wSdqfAZQLGAwlepNbekV8WLMzwJeRESPNZJ/6LCzTqg3hBmw4SKMT71Z3YTg8BXRw==","shasum":"ec9a4c731c9ea7b9cc726063ca94b23722fa2847","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2110252343.0.tgz","fileCount":28,"unpackedSize":2021969,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9thyt2wSPNgbQzKQ8UQcLOwq4ltmEwxlntfypQpHcvAIhAMJTHsTHKprJkkUDo3OVxTWZ+y5yo4n4WGSy7aRb35SW"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2110252343.0_1635457640809_0.1530103851435618"},"_hasShrinkwrap":false},"1.2110281959.0":{"name":"@bentoproject/accordion","version":"1.2110281959.0","description":"Bento accordion Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nThe Bento Accordion component allows you to display collapsible and expandable\ncontent sections. This component provides a way for viewers to glance at the\ncontent outline and jump to any section. Effective use reduces scrolling needs\non mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct\n    children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the\n    Bento Accordion. It must be a heading element such as `<h1>-<h6>` or\n    `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded\n    state of each section while the user remains on your domain.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-accordion>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-accordion` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n  ></script>\n  <link\n    rel=\"stylesheet\"\n    type=\"text/css\"\n    href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n  />\n</head>\n<body>\n  <bento-accordion id=\"my-accordion\" disable-session-states>\n    <section>\n      <h2>Section 1</h2>\n      <p>Content in section 1.</p>\n    </section>\n    <section>\n      <h2>Section 2</h2>\n      <div>Content in section 2.</div>\n    </section>\n    <section expanded>\n      <h2>Section 3</h2>\n      <div>Content in section 3.</div>\n    </section>\n  </bento-accordion>\n  <script>\n    (async () => {\n      const accordion = document.querySelector('#my-accordion');\n      await customElements.whenDefined('bento-accordion');\n      const api = await accordion.getApi();\n\n      // programatically expand all sections\n      api.expand();\n      // programatically collapse all sections\n      api.collapse();\n    })();\n  </script>\n</body>\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n##### Actions\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n##### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n**expand**\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n**collapse**\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n#### Attributes\n\n##### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\"\nanimation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n##### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n##### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n#### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion\nfreely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>`\n    element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot\n    have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements\n    are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoAccordion>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n##### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n**onExpandStateChange**\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee below for example.\n\n**onCollapse**\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n#### Props\n\n##### BentoAccordion\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section\nDefault: `false`\n\n###### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections:\nDefault: `false`\n\n##### BentoAccordionSection\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section\nDefault: `false`\n\n###### expanded\n\nIf true, expands the section.\nDefault: `false`\n\n###### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n##### BentoAccordionHeader\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n##### BentoAccordionContent\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"55fa3e004e2aeece5faf9a68717228077c215a13","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2110281959.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ccGEdBGd0kMw1BxUSozuU4bKNyGsV9wDbffxnZSGAHNFBPsyhKvLmp0mYL7AgRd6e+km6nKj1rHiXbEnf0ewCA==","shasum":"b0975d97b46ba86273f3796ba4165ba1e4657deb","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2110281959.0.tgz","fileCount":28,"unpackedSize":2021969,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHtRCJgnF09IgSsITapY+eQOLKHAb7Pvg0CI5K4HArejAiEA+m2SacjrqjpsZNPN2fToKXhZ0CGCo8OnGPMHI8MzDjo="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2110281959.0_1635508349598_0.5213742745113457"},"_hasShrinkwrap":false},"1.2110290545.0":{"name":"@bentoproject/accordion","version":"1.2110290545.0","description":"Bento accordion Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nThe Bento Accordion component allows you to display collapsible and expandable\ncontent sections. This component provides a way for viewers to glance at the\ncontent outline and jump to any section. Effective use reduces scrolling needs\non mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct\n    children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the\n    Bento Accordion. It must be a heading element such as `<h1>-<h6>` or\n    `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded\n    state of each section while the user remains on your domain.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-accordion>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-accordion` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n  ></script>\n  <link\n    rel=\"stylesheet\"\n    type=\"text/css\"\n    href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n  />\n</head>\n<body>\n  <bento-accordion id=\"my-accordion\" disable-session-states>\n    <section>\n      <h2>Section 1</h2>\n      <p>Content in section 1.</p>\n    </section>\n    <section>\n      <h2>Section 2</h2>\n      <div>Content in section 2.</div>\n    </section>\n    <section expanded>\n      <h2>Section 3</h2>\n      <div>Content in section 3.</div>\n    </section>\n  </bento-accordion>\n  <script>\n    (async () => {\n      const accordion = document.querySelector('#my-accordion');\n      await customElements.whenDefined('bento-accordion');\n      const api = await accordion.getApi();\n\n      // programatically expand all sections\n      api.expand();\n      // programatically collapse all sections\n      api.collapse();\n    })();\n  </script>\n</body>\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n##### Actions\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n##### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n**expand**\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n**collapse**\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n#### Attributes\n\n##### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\"\nanimation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n##### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n##### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n#### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion\nfreely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>`\n    element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot\n    have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements\n    are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoAccordion>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n##### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n**onExpandStateChange**\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee below for example.\n\n**onCollapse**\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n#### Props\n\n##### BentoAccordion\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section\nDefault: `false`\n\n###### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections:\nDefault: `false`\n\n##### BentoAccordionSection\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section\nDefault: `false`\n\n###### expanded\n\nIf true, expands the section.\nDefault: `false`\n\n###### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n##### BentoAccordionHeader\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n##### BentoAccordionContent\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"1cc07336e186d25fc5fbfb2e8f7e12c4a5c79fe9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2110290545.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-K25tf6ZaX+GH6ds4AYTf8BZlTbLY9zqJIvDEClCe2opN83t1Gayh5OHEnitTxjtV/Qx6RgMtd7hXFLHxZStVPw==","shasum":"2549a08f791dcb7dff5b2e677f20209646aefc7c","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2110290545.0.tgz","fileCount":28,"unpackedSize":2021969,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC24TzTOV6E7dYY+iYu2qtphrNbLGw7GRaTWAfu6DzuPwIhALp5qAuSI0AiYOQqRDimtcXKpTGpaM7al2bZiHpFiaHF"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2110290545.0_1635592909450_0.6126153198280957"},"_hasShrinkwrap":false},"1.2111011823.0":{"name":"@bentoproject/accordion","version":"1.2111011823.0","description":"The Bento Accordion component allows you to display collapsible and expandable\ncontent sections.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nThe Bento Accordion component allows you to display collapsible and expandable\ncontent sections. This component provides a way for viewers to glance at the\ncontent outline and jump to any section. Effective use reduces scrolling needs\non mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct\n    children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the\n    Bento Accordion. It must be a heading element such as `<h1>-<h6>` or\n    `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded\n    state of each section while the user remains on your domain.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-accordion>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-accordion` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n  ></script>\n  <link\n    rel=\"stylesheet\"\n    type=\"text/css\"\n    href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n  />\n</head>\n<body>\n  <bento-accordion id=\"my-accordion\" disable-session-states>\n    <section>\n      <h2>Section 1</h2>\n      <p>Content in section 1.</p>\n    </section>\n    <section>\n      <h2>Section 2</h2>\n      <div>Content in section 2.</div>\n    </section>\n    <section expanded>\n      <h2>Section 3</h2>\n      <div>Content in section 3.</div>\n    </section>\n  </bento-accordion>\n  <script>\n    (async () => {\n      const accordion = document.querySelector('#my-accordion');\n      await customElements.whenDefined('bento-accordion');\n      const api = await accordion.getApi();\n\n      // programatically expand all sections\n      api.expand();\n      // programatically collapse all sections\n      api.collapse();\n    })();\n  </script>\n</body>\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n##### Actions\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n##### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n**expand**\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n**collapse**\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n#### Attributes\n\n##### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\"\nanimation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n##### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n##### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n#### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion\nfreely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>`\n    element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot\n    have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements\n    are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoAccordion>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n##### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n**onExpandStateChange**\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee below for example.\n\n**onCollapse**\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n#### Props\n\n##### BentoAccordion\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section\nDefault: `false`\n\n###### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections:\nDefault: `false`\n\n##### BentoAccordionSection\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section\nDefault: `false`\n\n###### expanded\n\nIf true, expands the section.\nDefault: `false`\n\n###### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n##### BentoAccordionHeader\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n##### BentoAccordionContent\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"7bd4192edeb4ded8e78291b094118653b1a78939","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111011823.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-muaHO5BlX//oEfz95emQJjTuYOclirr4N/jAzVPKDY0C3tJcN8C/JFyyiQ7OCg58W0TMT0Es0tZirwpPgSSbHg==","shasum":"eb1e8f170ec8668676fac1a25e69d20607aed950","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111011823.0.tgz","fileCount":28,"unpackedSize":2021802,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLNWSELoR6mafEnPbTlLaPe+Nu6J6XAY//v9x+xrCsjAIgbx8fCr9LeUoQ6LTkVMca78GzrbVsbaheRCIhff8ei0A="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111011823.0_1635852266072_0.3576303646713179"},"_hasShrinkwrap":false},"1.2110152252.3":{"name":"@bentoproject/accordion","version":"1.2110152252.3","description":"The Bento Accordion component allows you to display collapsible and expandable\ncontent sections.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2110152252.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-8qiiF+/unySP8eHlziy4XiUNBu9xp4AtwhyWOrPaTH6I2F/RMojQn9mxS+rRr6Y9+Exuh9svxYwulIhWUuM7xg==","shasum":"304b2112fd4d3a8c8dbe3a458bdaf7ae33eed1c0","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2110152252.3.tgz","fileCount":28,"unpackedSize":2021802,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQXejTkAhGMav5fGw+3xYGeq5IiMiNP3eCMPa5fOVDJAiAFrCHZcFNMFOiqK513LwWwgQAD8SNHMxUZ8MqlwiCA9Q=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2110152252.3_1635890615565_0.7407314562325562"},"_hasShrinkwrap":false},"1.2110212130.2":{"name":"@bentoproject/accordion","version":"1.2110212130.2","description":"The Bento Accordion component allows you to display collapsible and expandable\ncontent sections.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2110212130.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-AS3uBVDl2LB/X5omVFdICJeJSAYo6X/ENPt7LuxYOnOMoe9OHkqn5FD0BgskGvabQMH2hb42mmpVFWyJc5j8pA==","shasum":"b76a70132926e035ca3d0786e694e6ef07aa43fd","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2110212130.2.tgz","fileCount":28,"unpackedSize":2021802,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATJpI6p7iWBZfzJpcOOotd+oXC23vp8LYklHi9LvGdyAiEAmUhrWRJ0fuyYALaYF9fBjkIzVBy5jnqUEb0gf7eBbi8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2110212130.2_1635891256902_0.7081203477247386"},"_hasShrinkwrap":false},"1.2111022043.0":{"name":"@bentoproject/accordion","version":"1.2111022043.0","description":"The Bento Accordion component allows you to display collapsible and expandable\ncontent sections.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nThe Bento Accordion component allows you to display collapsible and expandable\ncontent sections. This component provides a way for viewers to glance at the\ncontent outline and jump to any section. Effective use reduces scrolling needs\non mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct\n    children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the\n    Bento Accordion. It must be a heading element such as `<h1>-<h6>` or\n    `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded\n    state of each section while the user remains on your domain.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-accordion>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n#### Example: Include via `<script>`\n\nThe example below contains an `bento-accordion` with three sections. The\n`expanded` attribute on the third section expands it on page load.\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n  ></script>\n  <link\n    rel=\"stylesheet\"\n    type=\"text/css\"\n    href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n  />\n</head>\n<body>\n  <bento-accordion id=\"my-accordion\" disable-session-states>\n    <section>\n      <h2>Section 1</h2>\n      <p>Content in section 1.</p>\n    </section>\n    <section>\n      <h2>Section 2</h2>\n      <div>Content in section 2.</div>\n    </section>\n    <section expanded>\n      <h2>Section 3</h2>\n      <div>Content in section 3.</div>\n    </section>\n  </bento-accordion>\n  <script>\n    (async () => {\n      const accordion = document.querySelector('#my-accordion');\n      await customElements.whenDefined('bento-accordion');\n      const api = await accordion.getApi();\n\n      // programatically expand all sections\n      api.expand();\n      // programatically collapse all sections\n      api.collapse();\n    })();\n  </script>\n</body>\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n##### Actions\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```html\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n##### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n**expand**\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n**collapse**\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n#### Attributes\n\n##### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\"\nanimation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n##### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <p>Bunch of awesome content</p>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n##### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <p>Content in section 1.</p>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n#### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion\nfreely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>`\n    element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot\n    have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements\n    are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoAccordion>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n**toggle()**\nThe `toggle` action switches the `expanded` and `collapsed` states of\n`bento-accordion` sections. When called with no arguments, it toggles all sections\nof the accordion. To specify a specific section, add the `section` argument and\nuse its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n**expand()**\nThe `expand` action expands the sections of the `bento-accordion`. If a section\nis already expanded, it stays expanded. When called with no arguments, it\nexpands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n**collapse()**\nThe `collapse` action collapses the sections of the `bento-accordion`. If a\nsection is already collapsed, it stays collapsed. When called with no arguments,\nit collapses all sections of the accordion. To specify a section, add the\n`section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n##### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n**onExpandStateChange**\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee below for example.\n\n**onCollapse**\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n#### Props\n\n##### BentoAccordion\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section\nDefault: `false`\n\n###### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections:\nDefault: `false`\n\n##### BentoAccordionSection\n\n###### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section\nDefault: `false`\n\n###### expanded\n\nIf true, expands the section.\nDefault: `false`\n\n###### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n##### BentoAccordionHeader\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n##### BentoAccordionContent\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"f4d548031e8e20aaea8ade649d3394d56518b769","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111022043.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-hzhyvhB/KFCBJhIINOe2sBpqJUB43ruuI4zyVc3sHgC/yl2t0lPH7QhOdrT7/Op7Ocfbw1dKkWejA7pY5w0YMw==","shasum":"38e9acae8c88ca5658074036310266e4375770ce","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111022043.0.tgz","fileCount":28,"unpackedSize":2021802,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0eQmKf3WOCEtG5YHgH0WTn5+FxtKexeRVL28a1FdLmQIhAPvRybtjjq/DFImgW/7B8MnY3AyyffK3r+uEiXSlRUZJ"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111022043.0_1635938478254_0.6810840519781465"},"_hasShrinkwrap":false},"1.2111180040.0":{"name":"@bentoproject/accordion","version":"1.2111180040.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Example: Include via `<script>`\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111180040.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-urMFVqJ4jGbTxii4WqIimeWSUSeboIF6bKYeXPd9a0oB/eBbAQ1U7u8c0hCa4uuMlfH6Yv62ZLAx/7g45UTgwg==","shasum":"72192e267a175b7c97300871abeaf8475160e2a2","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111180040.0.tgz","fileCount":28,"unpackedSize":1880157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsUkCRA9TVsSAnZWagAAStsP/1p9yikTwcVdV2sr+qya\nLC9UerBHrE0/9yI+CHsloTNRGzo4CHTjxo+OCt1eNcntZZPEmguOnuRkDtt+\ndaYEWuJ//+awukVs+YkLJSCZiB7DXZK+sJRAfEcMkyIgWdr1OKq0zZAtLQgK\nQW2USQFu7KKfg/Ui6+2nEQAbpjLXjmFrG5S6rpUu94wAvuuGWt7o1l1ZoBja\nF6lrv0EshVuupYcQJevLJooPCch/fCb4r91NS1KHnqwjTUvRI/HwGeeaPlQ0\nk9LJf/85pgZGP4M4YUEh5LYB0FL04UElvmZxMPWEPPPw+skwKXXxiMcV4L6L\nopugec8zV2jBlYi1StRexEW+XvEma9PHwlYkpkKeUPKGZUmck9rlBQCc/sQy\nC/fMOeLUxqI8aLy+XszowHV1cHmhcghJmUwAEkLsoB8pTqAP94JaNkpEGewK\n2X0SoYU11OGA7qhWzCgpouLKeZ+uHm+UaPO40JlsarKa+nW+ilXoDxrtJov2\nab7G6Kyn5pcCFmaeOyXL6h3gz7OrAA6l0xK78Us98mBH5QrvNzi7Tb/UGA+r\nMWZh+GVL9r0eYcHOLJt/q+nG3SUC31NqYWS7AyJPEFfPlYMb9CJCZVbswo3F\njAZ13SJCu87Kki8Sh2vPzWTPfv6snf+7xhthlXmgpaSL9bG5w+ZItWZpFgyc\nOUXM\r\n=VMJ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD8u5x1bzASUGoshMzUQycRPQ+5X7g3bULgU69eUtfrgIgKhSR951S7SGxczd/cli1wOuStW9fYTYl2rKpURobbkM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111180040.0_1637270820434_0.6211368592700828"},"_hasShrinkwrap":false},"1.2111060251.3":{"name":"@bentoproject/accordion","version":"1.2111060251.3","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111060251.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-eBpW1aAmvIk7NqaPgJiLBdsRoiWviIFEDbT6ZKhnxtAe6mR9jGpIhnmn2LYAa4dUirUFjWi0Q6SrSBYW7oRM0g==","shasum":"c09826f3230d57717a954f03ba46db319468e9b8","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111060251.3.tgz","fileCount":28,"unpackedSize":1880157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsjCCRA9TVsSAnZWagAA17YP/jc6kQixY+aCxTAYZHE+\nW87klkZ2f5SMRt6V+/f720KfYbmNslHOW+KCL+yLr7kXtoWk3uww8bpi0ZCj\nEJpOb0nBFw5yII6/1NM2BTGhG9hvoXFvH9OJvpZeS8+rqoUGHQuf+56KaI7U\nl5cyvEwouYkKGGEsbkz+zei9a86oFeuSo4iw4roBcjQ+aszChBbkXdkXzTmi\n44tmyhxR2JxNe0ba13aktf5QJUrwb34xk/EUlCJnuLragz8HV6naoL6sAzX/\nopmUNCpP3KWA0+MytdAwP8Hz5N+tEGMRNo9qjDSOm7S0lbME7lWOBZLxz8Nr\nvERk1KCAJ0RjGf4L8tZZMhTdvIMvE5vW3iQ8Ap48jXNOtQ5XBzQVpoivftYr\nVp+LjwMAi2h5amV++mCnW/wBxfkSaJGjofdRuuaPoiqThEjulm8TQRRuy3gG\n93elb0JhM55SwN75agTg4kex1ZXUhr33/w0Z+3BBfa6AP01ypJWqLNFM0UBA\nzemUmA0EgUSXPO4UHWWCyBzdnAJII/66VoprblLgPENsHIXeIsPk4A6W+rvM\nEUegG+sUhYXfI7zo2h91YH4DkLaj9UW6g7sWFSZJJY5OCylo4xYT0LxAO/Pm\nVoYROeyg1Y4iPx0VQ8u/b9FN13ClELaVa/v6P7GapzmLRNBm791SpleIfy+N\neQ+o\r\n=6xqP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQLkwYN2w6udtUtPN/ArarfCsNN2/ALfrryvXLL3OLLAiBUdGMjVmirwGe3XSzMUTxVtVh0m2aE43D7VoaoKYihlg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111060251.3_1637271746293_0.016204405964127755"},"_hasShrinkwrap":false},"1.2111182332.0":{"name":"@bentoproject/accordion","version":"1.2111182332.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"34ebd943d9b16506b7a515b38941fdd8357bd288","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111182332.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-2CqmbyD0LX3ea+TYfT0go7WRJMeWu0unHxOqp2TjOlpx7jnh0eedlSDY8Fqf85rP46UXBwj9euvf0YYqB1TQXQ==","shasum":"37931edf18f52a2ccc802193bf0ac9a40eba9381","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111182332.0.tgz","fileCount":28,"unpackedSize":1893500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl5dvCRA9TVsSAnZWagAAIfQP/0QbnpmbRJSQOUzLLY8V\nXbmeaDm8BLdeXSMmB8mSGVFSsDPcJ/wPVpBwjKRdaNq5OejvsaEJ2hB8eAWD\nrYoPf/JMmQ8do+sVXvtq0wKS3waFahsZK+WoKIMbPY6SC0Yqkd000cUKMG2N\nGsvDfQ8wYeHosHjAnUyOYybiulWO9xGQ8dj3krBFzNw1qS/8MGenw9xcd0Qv\nSVSaoZHUR36EEunrlIsz09Br8v2tOlZD7HPmGzRYEKPPnt1pS5hav42i9SZn\n8toD6oY4TJjJYKjlejExbqyDUmTuJdxSZXSSwsQbcEtQfqeX3wJ5Q3UERtJY\nfd0N974QrhrcZ3rSgTIXJ6X+BDf4ep9kyj/9Lwn8M6uVvrtAygKLjFOn7EO8\nWAgycaz3S54DpE0xMd27mqdmy9+yrUPcoNYeB19Ifd04y0EZzsuq0r0e2aBI\n23K1iwvLrwwJIOyQcbVoH3y51kRXk22k2fybfbt1+/DVbCboXlQefuNZmHuo\n5jAGoFXl7vpkwz9jzkqDxXiP99Hnr0WIQfUwavL3YSkqXrNSM16hfwzIKt0g\nDyCwtA4eWhMP66GZZyUFtcvmX5DW1zrLwk3k2bneSHS5PTGVK8+7DZetHsFN\n7LeUqwH3UwvQ5U9fTvvbnQ8AbcH0mPvUFZv0i2mMT2w1+I6Hw7IULlTLYu40\nOc6v\r\n=PEG/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyjZb92bmHe/SNkVe49faqruQCt+Wnya6ubkGE55u4TAIhAKusPNArXD2af2UJS4tMefG4hdKXfROCIT/uS6t8Z6bU"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111182332.0_1637324654812_0.7806124394142997"},"_hasShrinkwrap":false},"1.2111060251.9":{"name":"@bentoproject/accordion","version":"1.2111060251.9","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"04e44a3695f8db307eda69f753e10665cfa70fa1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111060251.9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-dh8478TRsRmZW4FHdtjW2XRe+MQtbug7z4sWmuUw871hF9DzTV4AEvPNKHgCIjVSoE3MRBzqw2hrAlbABghYwA==","shasum":"c68828e7f0e94862bb5f1ea0326b9222362f7a77","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111060251.9.tgz","fileCount":28,"unpackedSize":1893500,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdY/mnO0yb2LWQwpYoz/DDWMCpPSmait+a2WyNYygpkAIgX3lrX04W6aonvhAoJwhBfNFVfE1Ycr0vXC7CzeZUNi0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111060251.9_1637339456395_0.38908825986722295"},"_hasShrinkwrap":false},"1.2111191951.0":{"name":"@bentoproject/accordion","version":"1.2111191951.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"22d6da19b9e01e75e6b67f54cd425c465822fe8c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111191951.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Zt7voCZ/6JkQ/mudNcrCVWPU+bfzn0QbxWf1HHMfvE3BbELOg2Dq/JgGSVQiSFVDl11nMxETWahg7wNblxGG1A==","shasum":"081c89d13220169dc6f815d772ec1c5e2348b90e","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111191951.0.tgz","fileCount":28,"unpackedSize":1893500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmOjMCRA9TVsSAnZWagAAMlsP/086tFONISnBBF65mrsw\nUFsfyQlD3q9oJQRyP4MrY3zyN/h8wzdLSYCipxumnxxA1ak9gPeDyM2vmCzs\nN4CxO2L4AXLP3bC6X8bnbxWOa+fNvjQm2kja5cl6inNZOkKkvhpTFVb9Ce1l\ne3ayCIvMbsSJ6dfvOmMHdEkN+LAqHbc1wGFBhCBgRSWC9G1qUbhrjAFGm90O\n65NpqubOQAG0VMmjndNayabxMy6/fd8A82CgB4PSjRq+ffgj90J6KrNxmvxm\nu734ougrBrN/2lkltYjXr9ESdU1iOt8/t0Q2kywdsByq0L8YNUT9IpyTsIWv\nACV/qXIaYMBYQ2Fs072h3JDfg3NZ5eKVIJpFzi1Nodcz07vZnO6R3UlCu4t5\ntFtcZYmVi3D9ozg9bh/RZQeMOaa8TNj5FktN7XVTGSnK5qQute9UtH9c1+BT\njtaXdlAUGfRb/yzx/HoVRZydjX1GK5mBf8OMMcdPAuidiDqhq5xv00qDYsQf\n5IxtyxVjcZbGGisxu6FwVmRPsFk34o8Eh5402PrQOqYxEfJb4+8RVsxq9IU1\nCGjC1+kcZfhZy2i4GBm057QO3ncmiB8ifXGD3Qk+lOMO71OXqVjNYvQWuxk+\ni4J0zsNcsrsb4zAclE7XXPTyWaDxSM3F9j7wurJqz4zXv6KAwPTbLzPphLtB\nBnh6\r\n=MBdF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAR3+D+UV6yYHpJCgm1psIwpYWvOS/ks2FEDycLrIhs9AiAHDC5o9l38F//npCft7f7CkTsfv5Ld+wz39Qzw22jKYQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111191951.0_1637411020401_0.6145827509007968"},"_hasShrinkwrap":false},"1.2111230244.0":{"name":"@bentoproject/accordion","version":"1.2111230244.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"d906c0bae3e05aebd88696b9659414f63c1ca45a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111230244.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-tukMs+PTmHG76XNf8DIGMp14HZJPEwQTC1RQZXdiukjXfsP0Vj1230axpmppBaQcfyeYFXsKEE1ruvUnCMrUSA==","shasum":"de1bdbc0ec83a9134ce529453cb36e014210b056","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111230244.0.tgz","fileCount":28,"unpackedSize":1893500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnN1LCRA9TVsSAnZWagAAaVEP/0TXm96f7RfVnCRKEU3r\nKRILJmjp0CnvI+NdCCGBoJM9PB/5oM+9Q9FE9YH7j/qXZz7+ZBUntLqfyPAI\n43Z8Fwg5dqUr3at3E0pp6nE/6N/CXeIIu2KKSaCNCr8UTcdoAfjJVQuLbW2u\nqS2oyWh1jQUZUeSDbjh7PEvON1+AtstX9K3zCmW1xa2olvStUNSffwiB/ZXf\nWfSoYcd+fIW82SbZ0UHgu/EPc3N4a5PY5+sBo/vERAQXN7tlRGSmYkdy/vg7\nhVA2ylF3YLZgROvIcrM4iel+bO2K6e6YDCOOSva/LlF13Q12oz+miqh+tPuH\nsZAfOeK8+s+TrJsSPv6no/W6xstJtKQ0LwyzdNuSCaIUhqkrBvAyRx73l1Rn\nI+8yBYJs7vGbhFUBANRJZS/xz+1vy+AV1rbmwgqoPhoGpVwQfUP0Zwu1Us4Y\nqubsTCFfuu0dqcBuVdsWbuaZbvXF3S3hEuzXMVu4x2fSjIlPpLozrG8/5bAN\nh4SI3sKL00SVvt5SNujsf/nbuVG/BoMtDmTZxasN3XoubmJYhAnhRknhoWJk\nyhy5sg/33+9WSOng0natfOT74DDSaB8rKtoSj4e/WBvdGrXsTVu+wvvks5Qm\nJkOrJK8kv3mtYqP3ItPYsbsUjjMe5PTnni39Nf13nNw11ovfZ3E6bh/kmxzq\n4DJG\r\n=ABEF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRmqBG2yemz0+hJwQtb1usu9/Y+3RGp0PI8xv58ClvhAiEA2kYPvFPehiFjvNKVkcKbe90e+fkSCvdoCZ+bsn0rSbU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111230244.0_1637670219156_0.6798882880795754"},"_hasShrinkwrap":false},"1.2111230636.0":{"name":"@bentoproject/accordion","version":"1.2111230636.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"46e8f482bf5e3008ef07e950034d194c48317990","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111230636.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-dNjJM7noiecuqOSN8Bon3rrB2dhT1f1KXHMGx4+xvmTwwhNyxMhrn00iDs4cutnHlzEKG3tINxFih+3z3hiPaw==","shasum":"381300f0ffc4e2bfe827c991d6560d9a8d036ba2","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111230636.0.tgz","fileCount":28,"unpackedSize":1893500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhni6ECRA9TVsSAnZWagAANf4P/3G5OOvFxesz93mRGJbt\n2phSTHzVuapT7tv3TZ2XAwPNVFGcEqi3zJ2cmzX5kWKcHQcjibw0RJEgbq2V\nuVL1WhHyxdCqtQEbo4Nw3F1iBcEjqgm1JyVc1q5yj3vSGsb/rXHswyUUsJv/\nVJcewN3b3XivF6HxcS1VjJTzjBeXJk+Es45ipgvtF3GM9d9bsTKRqHcmSoOg\nn/tiXDPXM3+mxFKM1GAcv0AH1XZqeAOWpC6MXTTjz6t3PB7aHf65+EVVNuH8\ncJ/M7qSuyGHJbYVw1UqUixIJ//B9/Wh737kggDtkHN2dqlChvk0KZ9e0OXlM\nYk9wvNyTCkWu5ENynQ4sWfBE4g3jkKF4KVXuiTlVlbnS1aSzyDh/O8+X3CS4\nBKgNTviizK6iNKzlw9fw6WZNU5J9tkXvKti6sGA7EnPw4zAjrqEVQ1WMgjZ2\ny+hpx+TMfT9UqiKEL7pVfCw7GMynKiaMzCqgcpgS1cwNCP+GyFj3F9SjJRs7\nxSKVVQyZq/Kd1rSsK6f0/Hjela6oe7FFS/xsvTXt1vn3SnxiTC3yS3hZOpPh\nGx51yopmnxxYt8s3KbMCzFL4fihicpfPPF3gdCpC2tYai+5PC17GV68RhtHK\nDRBR83SU8Q3tZYjyJbMpFO28QBzRo2yVicCsaYQ+Uxk6TymhwwyIf42FPMmq\nNksK\r\n=Ih4Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCz5RBTJxHzIdRLIdKX6gnyTXLHCjNzLBmQRKZ0yIaBAIhAJ0wFl4KiSC6oeMGxIHfS7tZjORoXmFd2xUyawzB+giL"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111230636.0_1637756548175_0.46959058371362605"},"_hasShrinkwrap":false},"1.2111242025.0":{"name":"@bentoproject/accordion","version":"1.2111242025.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"b78e8781ff3976b3bff1ba881cf66dd2609b5c07","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111242025.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-BOaApIQAdzYmo6DcQ0YolCL5TG4yAPz0Zp90AHYcB3Hk3b5hb5S2kRPJStKgJzz/ArLyV9Q2C8eSo/nbd1ajmQ==","shasum":"b7b9c1310f583478d14f663df26f20281afa05bd","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111242025.0.tgz","fileCount":28,"unpackedSize":1894579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4SfCRA9TVsSAnZWagAAmLMQAJshNs6eDfMeoztCMsYT\n0aNmgCfwxXXhsiktV+a8yR2XoqsJcILom8k1B+RI13P9Hr3fb0og67aVHm3E\n8wKbYS3Za/ttUU00qyutwPuuBXFxh5MksU/eCvUMdDrzYLX9vlMyXA+nBW1p\n01gIx9Lro5GnSa8ExHnrBWYUJ/kItZV+4CMdPkFiDwFRQQsnDSWD3razIMqp\nU2XVHomNELthNZAcERO4JwarkVln9qWzaBp9gOss6ee/flmeHQa+rG37MY3Z\nmTmd0K77h/L82eEEQUVsxm5xr1U0VR9IfHl4Y+20drEyEf/WnT1ZIvIGe2f7\neyHcGOSdD+Hvo0V0GywJwV8HVMIvhhuCoE/F1iocnwI19LzhiStt0w0u7YXX\nGaKzDj84JZzrwId4i/5a4Uyv00mv8sjGoJANVJQSQ7rUq9+mxtXicEAk/ppC\nrGYXZJ9DzTeKFXTr2guU9bspjipPz+VBDTJNA0rBPRebtI3zGC9gvH5WbU+U\nQZbpcXnXZGgunhC5fOaXrAn+oWK/SQG2WoQOcuiM8HTrmKyUbUpJjqMRQzm8\nQTkooyVgZKDyFtJ22YlT+JjJ1qhy2u3A7MSArodLhm1TIApRMvTUguoSdFJS\nmhJFv1vGN7kjmOdjdqHxgqigu0iRaChfoud/y+WpFeC1QnP57JFOyKZh2wRv\nIh1/\r\n=PisL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1kgJ5uZD2aUGDzCEQeytTS07OhyuoP15lJ3GqhgUVfAIgCcUP++NGqVMut27eLcq44Huz1vHEerfcQao356xZHcI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111242025.0_1637844126895_0.6947271831248316"},"_hasShrinkwrap":false},"1.2111292120.0":{"name":"@bentoproject/accordion","version":"1.2111292120.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"e938f7c9446e2d1eb0f0f865c0f1ff42a4be76c5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111292120.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-c4N10s3nNRBUqmjIQ4D2xjTQ8/MyIDd1KsVC03gljuNXbz2gyNCvzSq5vXmjMyKn39/t6T1TPXDPGupgwWzbxg==","shasum":"1232139e9c9083caf1415e30e5ee0338bf009555","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111292120.0.tgz","fileCount":28,"unpackedSize":1894579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhphvMCRA9TVsSAnZWagAA88MP/3wyNixe4x9IysByMajO\nSjIh7qJuv/fRAGCqgxWwMKX0q9fsYIqI/FudSF4b3faB61NONASe1lXNaEEB\nys4BTRd0F8eKaeMZO6M2fvkrweRyG2IvW88SxPCmuMPVCo2qW0qn6puhCpvo\nR6KILisPJt8Gklxd9pRNrnTYBix4R3AgDlCZ+VLQ1TelfZrCOb8akl79OgVs\neH5+ysCBO+RA0i8mAbAP3XDMkFuNSnJz1pUDRWGJ5kxUiGG0Jxty4SmJYqAN\nCFE+Z7lVC98vgL+iKmDAWb+FwjNz3WdNMppmtLifLOQs6unPqXRylKz3ImYl\nktvaOjv2S7OYO6+mlX42/+L+pfsmrBCwyBQN2OJkrBbHX36Hjhz6uh+f9k1f\ncUE2prUvjDXYrBKeC6XSHgdaVa/cRVdeWmGp7HLmBnmai/Pr3x8vGS3MjaKv\nLs1ffvik89vakivaWHqXs/QGirWdWQVOxjBUMexLYMqjzRh6CtyMSRkhpBeU\n5LHYA1D22koQwIUmT7QQ+QwJusOxtLoaR0J+aOYJ/Hw520fxhlpMHve/T4k6\ncapq2kKa12KtEQTuouAqdQbyeDMk68ERiqmRweUPgF8zU1pJ/ywk+5txvD8n\nyg4ygFIZ6IedqCKlif6oc8PLSVxrzc3zl0wlFLRLT985LJeORfk9tgSN2FHU\nVVIH\r\n=H7Ie\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEG4N1kiuwTtucq7pX8ykPgM90Ca3bwcUCF1N53ZeyUiAiBirQsM1s9KECWq87uTcri0vB0lOoFeUgU2OfQ0E7Sahg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111292120.0_1638276044218_0.7219202806664189"},"_hasShrinkwrap":false},"1.2111152338.2":{"name":"@bentoproject/accordion","version":"1.2111152338.2","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"27e204ed206cf75fae0a37d8f110b5fedb45fa7e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111152338.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-QIv8wyxEv8yRKCZ+kDb+gr9eJFvla/crONp0VhXofhwm/JVjPiEbyXnOUvy2pDyttzgYJwKtPAUpgohVuJjlAw==","shasum":"6842f20622a6a2c74239f2eb1420b98e2ffdbff5","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111152338.2.tgz","fileCount":28,"unpackedSize":1894579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpmWBCRA9TVsSAnZWagAA6gYP/2pgAGvqOlSfgsRgCgcL\nTaEWfxOGWG8wDNSJ2jEm8wQMrbd9avP29ppX/4hmYy7P1R8CyOophgl6qC6X\noTI7QL+mioYBz4wsa//P22Cn21qudsqsH7fOF/8ANgh3FhW9S5zffFl6n0sn\nXpcjbaZOIbgmYLVHRlzrtvzHCfT309jwgEYMmgI3wwhPb+fnyyJm1mq1zSLM\n8KMqzD6OQKRadEpVu/FoBUUYoiOzVBuYgELLmZLf80UV0WEa4PnSgGdnkkG2\nzL6koFuBB6vVFliKgR2/9HHhCbV3qMS5VY7WyB6HWaVbNy9052JEOInVBs5q\n/pIVKgO4VIEOHjXcVw7+TRxSp7ko5pg0hwqW7HRzDqAViVq7E8wun0f8BdRi\nFaCKqrhR2IBmLi9qvKoGm5uh/vKvlwQozOz/qaZ0mPrwak1B6uSqyHk84P69\nuiKfQMUZIz3/1zCnSbUb/9dCoQ7/LJiBFbfoEnLXd5uDp5k+YFp2J81mfz1s\nU1MOBXnkBSvjWuSfdoa1TBhddO39pfIXpZytpBpLXT4BrL0JB031g/Og3uPe\noQdYqZX5k8h+J2LFCAHfmAClVGaKhva6hkEeH8JeYi+FXI7LO31257Fctha5\n46ZnIgM48h4RsOIIcHOPcnlOCq3Dof+pH6EYsy0nVyd6EnP6yISCqy1b5Ojv\nylj2\r\n=hGcZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1+gvu9IKH4pM7Opj3vrlYZo6+Dmz17mDIXnoJaNIszAiAyAwPQ2IznXiFBL8aGdSu8RnuntYjninPpSfwPHecBHA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111152338.2_1638294912854_0.39813121219352565"},"_hasShrinkwrap":false},"1.2112010058.0":{"name":"@bentoproject/accordion","version":"1.2112010058.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"6d1060a3a4288fb99047cc700661d589bc9e2a01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112010058.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-gz4BKiL9YY29NYc2xcVFbwvQLKrzctwOz+NhMIlttDHKqE2KBCRvvQ0Lj3RNbaH8ZT5oAH1HP3+7l9KLZM4XYA==","shasum":"27078c64806318ce48b8fcffcc0c47a3f240d6c9","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112010058.0.tgz","fileCount":28,"unpackedSize":1894851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2gVCRA9TVsSAnZWagAArNwQAIsT6/WvB9D2GMSDCPuL\nNrP9CpvZ5n2DAALjzKbHMEe7+PyfkFRtiER40o21k2kciQRtmG3OxmKMUjMi\nCFxKTafKBAT2GoSiQ7Q3Ee5KVAl6KAJ3T2+ufuMqJBCUlNV3w79ZLE6qtZHA\nwz/KzyE/Nzs3iyuOem32uTREtKdjoZNU9ZjmrstBmm4DxeDHgvx7BSXXmgIp\nbxijIh+qzCqeLPzyBj+NvIl+j9BuhzDbJLJe5kbgg5qHNBJHIpD7PD0Ula2Y\nbTc7YAMRdI5BSsDE0UFDqXQGmL4dKyQ+DEKJbdibtLFzYgSNWqHj1hbszZHt\nBlJ4MpupAJDTmKHqXg6WsptYGd635Cz/0uagT0cvB/haS1LglU7LQkk0Ymmz\nXyAa2XuEc9wsxjKMZ8gZ6Ehpz89OhAeYukAeHnkw1Ks6fr140OnZP0Ud9Qou\nA5Vyrd7fWg/wrRGjtnIRrfBd4CiK7RKNA3FGfkGkkwFN6qJyAwDuFPHldIkE\n5IlktuD01p7mGSmQjHAo3IMGPUiBSPkdZB9+6LqEQei3mgHBHWeelpyi1YpP\nAPFjwYLnNOwzB7bMc91LpBk4CY1jMRkcv8EJluNsEaGjXaNtvBYetHLn6y/R\n8fVxR79zpylTe6KgOoJFwDY5RHAcF9We6H882O/ApBV7bCJKJswAi0JfBHR2\ny3jr\r\n=N8xi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB8t6rxmBoaw3npl0GmWpqE0EOBU1WJSi62mJaRcR9ZgIhAMxcDu4o7nVNtcPZL4ZjsQ8kQ2AYNIOCLUT9pqFQRvB+"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112010058.0_1638361109082_0.31473001826227764"},"_hasShrinkwrap":false},"1.2112012300.0":{"name":"@bentoproject/accordion","version":"1.2112012300.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"4ecf84d856583465c1ab59847234535fed16d55a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112012300.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-EjVhuVob5OwVewDwih48hF7Qvz5k3Cr+rEw6HrsXUood6WJrwG7sxtSGusPHPP7KTGVQzu2PW/rN6Cf2WU6FFA==","shasum":"31b45fb66f8ed4cb9028d58b793b2c31de36bbb1","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112012300.0.tgz","fileCount":28,"unpackedSize":1894851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqLxFCRA9TVsSAnZWagAAhOIP/iOZn712wy99aNqmmvLH\n3lfCmwjNQnc9C1A0pvnNXpPOA5BxjXCYOREKtwiRow/CT1mfOoxAVIhzG4H9\nXT7kMjAtotnEo30Fj9yKKXyuzA4aFcj0LUc/0wN0r3CB3/cpiYQcJb0naGyP\nWHEuH526YX6wiLzg6RV4HNwTrz2IJkH58l0LGQ0jV+rZGfs6YAczWQa5OBn1\nJu6oNw/PmxMCT95tmH+WUD8WElMnujNybbAVrZYeJyldE5RFjQMyMiy0Xo2Z\nCvTql2SvrG3+/bFmyW+AlklHezf0P0GkbfPrML2I6IAqob8qYpYm9XL3fUsE\no5pwZVBXhOA9P9O7Kgo7T9kdVczZGFjMXhM8OxYmGC+QH5kLsE6hU6qs9Tyo\neHyU/hWHq+tBESAuOgFz6H4nnuTkDH2wqxWnWeW/n9h+OAHiLLLn6c0IzClb\n/WXKtAnnGOqxP/7XCeqJa/ph+R1HLkGsxbYxDnO189odLdAuGrkhyHqZi3+y\nnCpCha2mXQzVP7vlrR0NYLYFAdAmw5HLkYZhNwzAOG4zJpMV9qJZ5PPnaMKi\n04ZM1bd1D3Scetz/ljt7KDtNKQc3kh3y6z9zdAtl0bIHKOeCEUM4EX4Ogf53\n3pvuAy0HIlyf7K3o6tHyYg8mhRs/M0qteHlhkREgE9lHN2UUNLtz5mJY0/Ps\niLp6\r\n=9KCp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNv17S6WeFPL591jKuPlLj1Vki9QOg1pD/di/K4REXogIhALk9x6g0WvoDbxEhPkZ7DepqJnhUjqpLsR3Zb4jnEYC0"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112012300.0_1638448196977_0.590799489512162"},"_hasShrinkwrap":false},"1.2112021656.0":{"name":"@bentoproject/accordion","version":"1.2112021656.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"4a66d3f7120b51959ea01867aa68d516d5e0dc36","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112021656.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-pP7Z5ZZKTUpxO0yidZCvmObnDPAEyxgcc1Hs5518b81Lh/RAmfs4LrGbxD0g4fyi/Ki73Qgk9PMpKAWwQBhHHw==","shasum":"4aba689a2eb4a5a2f5ee55a0946a320ce74282f7","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112021656.0.tgz","fileCount":28,"unpackedSize":1894851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqgvHCRA9TVsSAnZWagAAzPQP/39E5BAlKXY7+SH9SR+4\nYd+YiZ29d/u1g4PhU8hLpuhc9NzCYIEIyRBSz9iy9kd8Cl601YLZp5HfY2dv\n8bYJiJ9Zkwr80C7TFy7kHfCPR6/PI12mrzU1LVZ6wQmqOVmwT95O+nnWnA6S\nPZr4oWwGfKB1N5BhrXNmsyjX5UzgogCvUwHTsKx5wDxQLAJ5j7652QqkbKc3\nU9566OYYuLnhNWCQBy1ls9Ya7ihZ27DAMOS3WHlTD40XGgV47ngrWrWKBUWC\nTJ03Yd3akraXiN+EDu1Fy8TzCg+D9nA1584RIDh6tgooHmDzRtxxO7tlWeKg\n2LHKZaAKF1dpyRa7o/TgweBueUoeLl4GaZGQkfeCVhMTl4O6o/dzg/HW/kgV\niF3xhwut/HAdEydgRcpzo9odrJvB7OGA28+TY18ezdmKf0vKokRm5frfv4t2\n69m7jWHFj/1QAy6kiNg2Cvd35UlNMZrd5dWhSDNPwwae2N39sfM0wHcxnVmh\n8YdTSXNMsB10/fx80DGmplgDSfNRws4+2pD1FMAu61/PR3nvp2dPyvKFJoWz\nCNIcgjUdELHIcahrSfKeVub0KRqEZwq2OH7JZioJ0DediJj4VUoGRxzNtuPu\n9v7vvef4fiJcBHCcCZBRY/s3TTBZcln9Y0HfOC8eEWOFVuGn/9PzMEPI7jO4\nmwYu\r\n=exJT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpr9IrKU7vRlwWB/yPNsdpVbCLOeBrtwTHxFDk5XDTBAIhAP39DEKgEfnnual8EikYcBwuTMRq1Y0agE4gjoONZG5S"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112021656.0_1638534087260_0.08220465920487241"},"_hasShrinkwrap":false},"1.2112032204.0":{"name":"@bentoproject/accordion","version":"1.2112032204.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"80ca53e97f8ac619b78398d429e0031f40cf68c0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112032204.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Rqt+6/c+BbDTrlvbfY+UgU4NAJk66cJt+wUmRQsmwXeDFSjYuabd72+/63HIzQFLY0edSHl1wq50U6ZTPrkLnw==","shasum":"8a2dcd523bc7ce2b9ebcb5960835b657bf13b2e7","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112032204.0.tgz","fileCount":28,"unpackedSize":1883417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq10SCRA9TVsSAnZWagAAH4AQAI3JJ0gkj4HEcsgWt/4g\n6NVPVP9w37K0Mmt67RC1YCOJSckIEMGxAHYvd4NkBKLj+3jAXqIcuLAHTWzM\nqgw7SXBVlDrWApTF6L/xxXJTOSrxWYyfHm1pZGDIePYba3qF8Y0wt56nJwsf\n+UbxN5PRXpBl13+w5dBU/Vwxfu5XLAWk0nS77oWagQIVvx9rQqD7XutwEHm8\nKmc2c/lJ8K+slfrSvgz4BDB7UKQP/3ESwNpCCYRNS41jDC5ukjP6DOPilUF+\n9VkWUSUoSlzgzR5m2yJ+yuX72hlZkgaU8BGr08h45wGZe+ImltvNh0VXzPMV\n9/I5LrC7lA/7ZoeHhv+bciyLCq2GFWWYclltT9QQb4ag469NCsJB5+1HqmHG\nH96ppIKT9vVhfQ87H4ZxU5n4YdS/IZEz6ECIBzxqxPOS0g3SZAW+wIFkBrxH\nNYyJc/ThEkb1M/XiGG2neKI8QtTTVCdsDw9YXV0gfxzLKQsVkSO29MJtIFY0\nMx89m0nLdm+M3BJOkMajxNwmk/oEgaHla//TbdoDK5toNAPObc16z19C7EiG\nykyfDkf97IrU8bTFYSGPmoQqKfCkAk7lN3KpGYvJeq70vA7wDtibFye3sQD+\nl4eN2qGlVZSrAobBMahxJ+db6Uk4w7lB4m7K1mufEy9Rj4SjZzXhNwvpNoYG\nPyfS\r\n=cuGK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOUnSuxxoxvWF0jvwevt52lVSd3c8h/Uvow2ZUQAjDXAiBpK2Q0xP3GAYg9qvsJ0z1Wzsnag/Ym7bBfJluKuRuDfg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112032204.0_1638620434511_0.5753489427172449"},"_hasShrinkwrap":false},"1.2112062322.0":{"name":"@bentoproject/accordion","version":"1.2112062322.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"cddcce65024c209c9420ce0567f525aef4fc971f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112062322.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Kq9B3ydZXyW3bZWe2F/ns5daio6TnBdt33BcuyV8I/ROGQwdTVPy3USp+EzMocroXYZAqdX/gchvnljQLyRP/w==","shasum":"a9f76d75a8e4018d8bd96ae93f5e3c510de052ec","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112062322.0.tgz","fileCount":28,"unpackedSize":1885519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1McCRA9TVsSAnZWagAAGzsP/jYB80qsZDVgJeTdWq15\n9TFjwWPVyUR8CP0qccLiE28+acNbToRVfzHcabfvMFf0Ev9L+3Wd5hhIxNvL\n8wD8SC+rdwl+DzHYYmm7l2oh38GTe4I1b1wSo7QRZj5cxCa8Ri0hZMlhnebW\n+tviifshaucmMl4fSkqUZoQ8GNHPoIj/+QKwcVE80ppLebCeCavvhXnEzW0G\n3HK7MdNAH5eLJx1YUT8dR6ylEJNWxF8ZKhmnKlBepoXCllkgLTNAoYFqMCRz\ngiysrov/iaLLDANq1YxCVENWO5otB4uO9BkYHLw8DVuud9VUEIWypGpPCLes\n9RrhnL3rxIh7R6Xh8vzvrfoNWb2dsPVfmAS7GHBommKg6qYKY/qW7VtFLKrp\nggoTcYgdb4jqq5PNROXSSzOjRBbdaQ6Fetzcl1uXVsnBM4stRxvacF0Kg6zB\nBl/EZC+PHk1S/I8wCceAtYgTnvUZ/9lDmOYxfvx5NclWfHD853BRbKuz3KJg\nOQoYSFiXkJua5C/bRS3ES9Kpi+rNB4doCG4UPfTGA+Eft95vHdhN/0sS3hn8\ngHpHXxUBakzrZUVwAaz2VHzyM6pajSPP6jewFzcmxqKY1EfIeNTLH/ABKLe1\nO37fSTpq78vqmCUj/QB+AHI96Rc5VnxISWchyg2zGoUak8Aqt4uYNN/XuRPj\nmTNe\r\n=jjR/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOfA9tsOmegmf89WNbmfB/Q5QTJGdNrhbUtBd/6mQplwIgfxBPsdyZybCJeFKzO4+jjtr8Li3hlX5Hulmd5/sXaLY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112062322.0_1638880028170_0.5414420321786979"},"_hasShrinkwrap":false},"1.2112062322.1":{"name":"@bentoproject/accordion","version":"1.2112062322.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f7475a0b3b8ebdf1b06b5d14e2905a8154e0fb65","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112062322.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-rZZxxY/sKCJVtvO/XtDMtildbMjtYInOMNkFKthm0AJP8yK9HMBQzvwSTR+2pz2cEmQlWSyVfy4Ru6mH2ee5pQ==","shasum":"31c9b062a8153d4e078c6605d93f864263014197","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112062322.1.tgz","fileCount":28,"unpackedSize":1885519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr9RTCRA9TVsSAnZWagAADfYP/RTOXinII0fAb3r2CnFj\ncEbRXlbpCcbQWRkSW7lZXB/SrYA5whmnZJ3jjAozywEeC4mX+YRZ6549aG2B\nxjgyQuUpjAnLPy8HhqGu77xKkr50cySRqfZptVVwKCxoZvtlaqoSFQtwX7bL\nk4bqoOG4falMybO3qbGAm8XAhLovbRqF/oVeOd4nMgcAKCSDZpZId1+7zXY1\nlej2WZe6E3gwZI9j66l1B86WuDfRbx8++iOfvqb5QQgVOGOGP1++uqi8lFVK\nq8IRrdL2zp2ldeXUf9/Th6EiuXuIoqMV6M0uVbGuZeWFzN7+q5bcsEBIfONE\nE0fQCmfGlJRoJkKp4WNXbXv0oE3e7uLTi70v+e8nUPernQAhKQC4zulJNbkK\naI1GvMXPz+Om09PzMMd/EfObX2OjpSDC/6Yz2fTu2E2UZUNhHWhWHyN3k9dk\nWL9zJ0sWLoHKfc8uqyq4diLL5+T9n2i99NBw5kEsJnPAw/ogz8rj2XPlNA+L\nfXcfwRI4F2nBFmBy6UDvUR1usDWYYQwSlso97cR6s3eZ7hRAu/cJeoC54xis\n++KUshyquimSXfoHUVGcFvOzHujjqkzDkxYcxz4gxS4prJcBR/WPGzR+2Ptj\n+XgPCXsLEPXCSV6uE+AEtPb4AZm8SRNCcwDQGBi3tQH3e9hf5vtl8K/l62sX\nEhr/\r\n=Z1Cq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbECsSudTa3kz3yFul0FitiaKe4ysesXLaJW9KufPxZAiAJOGcAVNgsVK1RMTTR28Qz4VSCHS0d4kL3mCGO8rEsWA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112062322.1_1638913106958_0.7313958635934983"},"_hasShrinkwrap":false},"1.2112062322.2":{"name":"@bentoproject/accordion","version":"1.2112062322.2","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"3e8072d191c8771ac14d19f2122bba93b872265b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112062322.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-1kzJSBp8WfdRT5EzR5WTfVJehpg7nkOUoYUfNPZw7c+Txm3jMO2FE7AtrMcRZ38cpwtjpo9NlsrSML45sRLmsA==","shasum":"88f801e4616384c4685e904c61ef2d24bd411ab2","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112062322.2.tgz","fileCount":28,"unpackedSize":1885519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr+AKCRA9TVsSAnZWagAAbvgQAKIUDhCi3yvDpp05feYZ\nTPIXrUzfvw1Yv9Ma6v9btkT+IQjhuPokAKK5OgJkgQcx1iDS4KTCU+YH4RBF\nGe5F7TBZ8WUgtO4lRYXwIpSk0S5C+reWQSgNstJ+k2R7U23G4EZbLjgnXhMc\n5USJCqoVbG5Ktvwk1UecJ8Os3hGGF04Agw54bC/cVaGQVnBkZ7RdSJRurX5s\nkV+/AtlR3y7gNpUTHxLYC386b4UAtdlgFDENyacb5RChGHKoDF7JqhCb2Bz6\nTLALv5A+oUWPIUE1Wu9vWiVmIjZf6GIKSoeERowh/sZBdmvQWgn+vqPodD+/\nqRYd2wPEKcjgUj9o2RBrY+lN0Dvh33Y8SzrKZBktNS4QxhdLfP6Qrp8f2gm8\nDcQmkUGEV22l3ExZ50aM4bGNKRFC8OIHTQtkRQkb9MyGWmHeDW2AC6wOqCTL\n+xc+E5xbaW507GkiREnfX/bY1bgMverX39G694q4g4FPYcaWgHeZFlSe2k/g\nGt04bgeFsp0jrJV54oQAeRAW27d44v0FQRG8grxEwERHmKZIl2sLdu+UqkXF\nHfVfH06Dp4HkOGWtu5c3tVC7Vfe3zgsGTNmJsLiV+YuYG7bVzZQLAUxjRTyc\nI5vHh3gRDP0kVVezcdKo/JtwMUOwBtloZ44Crb9Sfca3CBEiaUG6nfJHm2sZ\nCrwH\r\n=Jb2K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUHp11sLSHmAwlT+RNEgvWLWgcK6cVJPhEhO+w71LiCAiEAxmtJbRNJhr8Nsgg2XAjDAlJkZF8tQOBWN1y1AbDEtUQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112062322.2_1638916106015_0.9074807096947479"},"_hasShrinkwrap":false},"1.2112080230.0":{"name":"@bentoproject/accordion","version":"1.2112080230.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"6d03180e136b7ae380fb9d5d3d6fd8c0d5b28e04","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112080230.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-vKlLYg86gtknCap528m+dgWL3eooVFsWpqesjeQZzWtSDWHZIy1jQomn4/2/SuCBnxCIF+OYGTg4vZ3T3c1HXw==","shasum":"0227ddca3c76930731253038879805d907972e75","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112080230.0.tgz","fileCount":28,"unpackedSize":1885519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsLGVCRA9TVsSAnZWagAAnhMQAJUlZAmnIW1TS3ZMKTl9\nxj0Q755aoJNjg6M+ALfSHyycA38Jjtnu934KQTbPryLbgFLoDtxFfDgI4XFr\n+8FRYhWULpvBuOcOVrqa7y8l09W7flpiLl4dtaNIswXBj0Z3wYUdmy+A1jEf\n8Mt9PVGMz84jo/ndyXClU/afe8CtbGw9RL67jCWjrBYBbM8WO8DflbwvhrOT\nop4G3UWpyd9rfRt+7Wk895k0Jj5AtQKgrKv1aefNZtcy9bsNU7000kKrWrSp\nJkqvKrPBk8soL5BdFy5vf0OCyZ41Fi4vAw1r6gSTmK/LAglf9hp1CAIg9Zup\ninhWm5S1AG5wSGvC8AV0y3sGCFxvmaLvWDzyXsS8xyi6tlah2MGAlxLId4Zs\n5ohiJwFoAqkjgHEKOej3izgCn7chADDbTFoyPusOipUWmsO0Oj43nGYYNJl3\nPj0ZEwIRPz/6Zoa0lJgT68xII2/WKGgQ+H67CjnY+Lat957qOJEaWYi3ITlE\nZTIpE6D5zwfdzyKKXtNwcsxXFP/a4iNJ6TqeYT1HUNUIRexsxGIgbxiG3oii\n02GzxpZmXnN9qgxWwSMorhxL1JzHxsXcdYG+MwyxEx8Fw2F1pBQ4+o3EeTKQ\nVvgJOOmWQUgm69mX5N0pbfR3rf+0pNctUsuW2kfxOTjQ3El6fsMeOcNN1U3T\na2el\r\n=MG/c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDrlvUoh8bA3X+Pe6mOoMNBC7P8ZnLswnxu4su3wY5/gIgXrdFlBZJj28U+mVlYECi2iWvHzqB2byCp0ygiCSZS5U="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112080230.0_1638969749506_0.7400618978627764"},"_hasShrinkwrap":false},"1.2112080230.1":{"name":"@bentoproject/accordion","version":"1.2112080230.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6268ef31f81697778937a9d77d4ccda3a561f39f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112080230.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-bQNtjI8XkzczBw+Np1aXuWQGCRLkryvsBUuFN7tb3HZsCcEVYEIvKVr2UJdmSpiyy8YrqJvN8wh5cyFHcwR7Lg==","shasum":"04c7b360bf751ab94d50f56228163e35bbd23961","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112080230.1.tgz","fileCount":29,"unpackedSize":1885819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNXPCRA9TVsSAnZWagAA1f4P/12x8bX0njxapBG8X/aL\nmNRoXFUOXeyNJIpyA2FkZ9f8n5ESFwgfq9IDvn9IGMmgY8XirS9JX+HN+bja\nAcl46t8nJeX0hFGbAK+ge6LswzRn3GnTevJ3UKkC//Zpahg11PUSdO2/gSlF\niaGbvtaTW/CoajTwABoOujZbZbr3h5WDX6AN41A71Y0DKK0mMY8VRCwO4SeB\nqP1pUD5r2mTeGrCrgYNlY+nq1MWOOgZN3/yr0USqi0roWgS61Qs7u8YgA6lQ\nHb3K6Bv+gXmrFOkwe0SKjQVPTNArHpmll5XMLEKhUNKu7HX9g43ejekqWgT/\nl+Wurjy9cRHPGGOrHTvV3/YR3MFJfQkBVElPDmIyNhb/prU/P2RFRwIB6tTi\nlFL9jao/ZQtejPTLTArd7aSlH9vsxOjLhP1BzXCEKbdFZM7SdEhPHmY76vcI\nlw9n0bfSZdvkO3zUd919yxXP/rLhZSGGdVSOV/IoC4tWVT3DVr3/EmHLlpHM\nLeOdScCbFM0S0cokSGc2CnE9L8jgSEv/uGiRrzVa9UUN9nJinz5YdXOt1PyH\neivXE3DIMcMWLR1yXqZPThqT6MhIZQNU+KronWM3/B9g/K4Hkw3+P2P3Ppey\nUe2VtZ4l8362/YPb2H0nfria6o4lADKhGsiAE2Si9rYWg40/PGAIbV/lWEQ7\nZGFU\r\n=zfsf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9fRN/QOF+Cp5r7XPBIvRRlSIYYCQY2YRQxj2mQz08iwIhAOMv3ZSOHAH4YeFjBti9Rr/CMTStYwOHfluFECslaM+g"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112080230.1_1638979023362_0.21583600708575146"},"_hasShrinkwrap":false},"1.2112082232.0":{"name":"@bentoproject/accordion","version":"1.2112082232.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"b7b1a9f9f7f0773645f4fbcb9a550233900046a0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112082232.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Ek+E9qDceAw3kGlKoxAgA0A/fD1FJtwKDyrX1FCUXgu2qzO9M9s3u/b+FcPX50l8kuMJAe1Iej+/kkuYvojTPA==","shasum":"4b0b4d3b1214b2c5a95edda410d95f9db62fbdd6","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112082232.0.tgz","fileCount":29,"unpackedSize":1885819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfpVCRA9TVsSAnZWagAA5f0P/iPZvTD+tth/LzLFn7Nd\ngmjPtebzozVDe5P1hNCBmPCf1LCXXppcWEUAI5BMzHsc83TFoleGc7cRoxsy\nlCZ85Dr0dlng+CJTelTRJi+9bnXcREVvB7KE005Sis4MQ+LelzNszwhHwke0\n0h2al3E9nW5S3ed2PsNUP+9vLYJCMdlnGGBAwfyFIA6HkyKcZBlIOypvcVuI\ncLSKl9ARAf4u/Exw2mSV8OHIzgKZxtCXT2jBbs3bYVjahBIWoP0CHmfJlkgh\nutJkNTriQWyp2E+HQEM6Yi+HXxNBP5BlYlNMCSG0CBkRFtwFqEEEJpIcPT0r\nGKXHLKLG83NfjCEl3yTWjladHWaAhZSU65P7EkNvSAgHXcn3Tk6xRJJrzPM2\nUnkurFbVa2XisCiB/+PEABAfh+hPPTgrKLyZfO5DcRr7sK4uTu/zSVPSg9OG\n17yLJgOjQZzCDFyfv6zCzRXA/lmX80963/MK40dvig16x/EgpLWh02LqM02y\ndAc07YZpV6WnkAZuDQYZ1YK5007cGuiFlVQfyVY29LDcHnK01k94dZIuszFn\n2ighYrIrJYfhwJGW0Cjz3zT07qkUTyDqalSl3bquQh9tzS5Bo96W9Qd31uGf\nGYO5ouSQqLZmxb9uKtPYkE52YZsxmfbC/tS6dbCSMuTzYxU2TO5nAx22FfrS\nzjg+\r\n=hRg2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCcJI2ytpDPHkvmu2nlUSrLHmSf9EZltMeGZ6MczIpIwIgGIxLMChjZJMxrtYjMjlaHqNkZYXc92jUaYGSApifjiY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112082232.0_1639053909043_0.5805755807662742"},"_hasShrinkwrap":false},"1.2111242025.1":{"name":"@bentoproject/accordion","version":"1.2111242025.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2111242025.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-3TM43MAV34wdaWn/+a9gKpqOmMaVKerWDukSbq+BlLcmwfirJZ8qStQkhZ0nCqMXvvgGnyryKaqVuqEwyFcWXA==","shasum":"03aaf8004d934a294c169a14371f99b018373d30","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2111242025.1.tgz","fileCount":29,"unpackedSize":1882494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhspt0CRA9TVsSAnZWagAA+YcP/ROTORD9g6sXo1wBWM85\nohqCG97g1oHE2UZa/5E+QmVKkI4apJVIzgptICrPbSrsdq3RL4MK6n3VJqf+\ndJBWNHn5dZirKccdBYm9gguXVneZrPk+kBcEHo6HTjHVvGt8/wyrgCbl2wTh\nRirfdQVMw8naK6/+bwx9qpQKuazODRbGOreed5mwfWYBbQ60KPmu5yvJppW7\nJdrikgKfxM5V1fflKsVg/IA/0yad6H6gqcVhbRsR+74lD8r/BGKDEzGu0jIC\nhuxCar7fBvUsuI8mkWuQmF0kh4mX9K8CbdpfcJ32jFWkdn/5QudT2HnrgZKs\nxgUgWOyfS8OhE8fFQSRyKyI4uTWKbBzHLV0XvcX7gQBius8kZ7zLlrLxPFpw\nQP2E4mU2qKDJBK40JKD1B4s4x+Euo6l4KKXu/EZTM5ZscFfGn3VBHbCytAXM\nZZRwHwEanUlj08ApMSjUzLbMxx1MnWhWY5DzBf+HbYngQjyvBoiNSw1BN0HT\ndhmHRtdtBzSZU3dGZx/nJsH8tb9NBuJ2B2HHCSNBRGurquK2tnNDesXub+Xw\nhQ3MyIXljvIiy6l6CGZwN37kP54fXZMYr863c/N3NmlYKI+GHXrZvZUOn2HY\nuZtbolyLMzeSvtYxIK1ktJsgx+ZpTX1/L6MSZYIOjFWZ4mr+zYBTvZI5fezV\nPfM5\r\n=HBH5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBa+LQk5OQYKWMxcq1DpSqbDISObmlYDUgUoOTzfdZiAAiAcLavyFq1Z9qdEM1WI9rRMyLlzlw2eHItAi1DuVSaiEQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2111242025.1_1639095156523_0.7364839376453995"},"_hasShrinkwrap":false},"1.2112091956.0":{"name":"@bentoproject/accordion","version":"1.2112091956.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112091956.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SblAHhcrLwhSsI+1S11PdGY2q4fKAIQgJOsvmLYMA9xatFLNojLMK/8IqisLlF+P5r12Z+if8iEol+cWp7BjXg==","shasum":"b132d666f1aa16c8a2b3d4272862b88b7b2b1463","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112091956.0.tgz","fileCount":29,"unpackedSize":1882494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs0wjCRA9TVsSAnZWagAAjw8P/0UannZwxntH1Shjr9qA\nx6aaJFHQOSVGQFGeOOhYfLnPNDdGeLrMFYdy5whO3sfw5RVHonxZUaPrLjcU\nnX7G776qSc5dUStiMclXQjWLi+wjVndjlC/EhDGdTvFverKfpCYyHcGpIlLt\nRVFng0uo0pYJMmoaqiFM+KokVdioZ/5q1pg0Z2Drz/lPPPepAC/DsAqQUy8B\nYHC5S63zgcijGZ+uqJXlV4lRNVPmKtk0a28bygbmWEpKvBFL0p/RkkyjoLwY\ndL5nq5tVhGHbXvd9P84sHMP3SgcbHX1h9PULTSGDZsTPBMlkGn1pv0Rac4xs\nqZrk+mxGUWmkImfkOFRXHQ6/Blrn2BYasvZkW03Eu2NwutOxLSwoNHJxOKNo\nNyYCG5Tjy6WX76RpKQBYIpMJMPXVcHYzmL/fyaf+SvS8WU+VEdFP/vpBi7Bm\n0JIGQNTECl1GVcnjpyMy8IYKSbBJAe4v3YIE/N/GwMCxqeJPNO5KwWuQuTzz\nTh0883WYJpf0V7rgBas9hCS+HVCoJel3r7qCQILB/LL384ExBDLETtXSWglm\nxkg32GhyUVRCyBWo60i3H/UZ6/xhOIFjH1hbvsRx8OFoTzdx7bJcL5axzfCo\nmJtKdK3uojcJxgvCH/n+/IqelKLSOa2zzHuxV2/dMb6SHyrL5sJhHU7+gSjN\nwpV4\r\n=PybR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6NGKhET4hoZr4ogdBFiJbBuIsOZcMuA4jZgYpHO8o6AIgD+qDUNG3GCJXqXymsPH9ffvdwiucCattkuVcgvnUPrI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112091956.0_1639140387191_0.3091634349255552"},"_hasShrinkwrap":false},"1.2112102136.0":{"name":"@bentoproject/accordion","version":"1.2112102136.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"07236921f8e25ede71217e1921f8aac93c30ab6b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112102136.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-eQuwYtswV+jDiJW6E1TN4tB4NgHPeE+8U9rmvDANqSIkvpi6zIjx72NvZxG/agTqdDqzRwIsMqajMQZw6x+ezQ==","shasum":"47ce1a863502f408b273277a06301a9233d6fda4","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112102136.0.tgz","fileCount":29,"unpackedSize":1893623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtJoPCRA9TVsSAnZWagAA2xwP/3jRhArxy7A8C0IqDnce\nUrsIvcTARnf94btatkgeHpwlUVKvsePmN2n63e40dIIqV++/88bTcvDRP73B\nbQUBQE2TlbshR1LAjqmXqcSZ6Ep5YBueGZjbGchKRbzCd56HAy75pBYMum7R\nE/pV/z7RYaVtZJuaYBJQYsEREJq2Gi1KXGARc/I3wButBOABKxLp7O20Ml8d\nfTMKE/5XHbxNGO1WxCTfq1g/g8V9Ujy6mPFqyHdMI+DI/42iJOaS+AgtvTXi\na9CW32Dicv78rqw33SV/LJAtYZ8imfRK+6t2LaQI0o7BwqiF4GVrwIFTKJ0b\najyz4c8CsOFWJS5hBSHd+muHqAAbMUgvzTz/wAYIbc18iVD9qIKWo7Exx2a/\nwje3t4QkpnHjpM3tFioycvT+LGdCyJCk4eXAYM5qW4M9jyG1LejlGajVXzof\nFGEes6RR4RZBP8YbBBqAlHJOMdbhmOiN0Y66uLQBQZMUhiEOh2T3DfNJBhO3\nErRmFeSrfdEizRXCTv2yrpXozzoqgamtXEMvYly08tNd5I9nwwZZQBlXyDy5\ndcNNh/Et+pETEdJ0JRyUYG0CyymcQoMXqxuTDQVmey0c8ImcIx0eknCnItq0\nfSpd0C9v/YeqndKC/Bopjxk+y2/8cXhDFrToA/OGR9S1e+rvgnq+IyFZaVXX\nlUwd\r\n=xteq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsHplCrfDXniEFBiUXIU0glw6pSeyyWvCKyKIQaT/5hAIhAIOzULyrI0k+UQjOY+D4VrEpZPljhYTH6df5Lbob5QOJ"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112102136.0_1639225871164_0.029374817461708558"},"_hasShrinkwrap":false},"1.2112132331.0":{"name":"@bentoproject/accordion","version":"1.2112132331.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport React from 'react';\nimport {BentoAccordion} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n```jsx\n<BentoAccordion ref={ref}>\n  <BentoAccordionSection\n    id=\"section1\"\n    key={1}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 1</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 1</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section2\"\n    key={2}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 2</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 2</BentoAccordionContent>\n  </BentoAccordionSection>\n\n  <BentoAccordionSection\n    id=\"section3\"\n    key={3}\n    onExpandStateChange={(expanded) => {\n      alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n    }}\n  >\n    <BentoAccordionHeader>\n      <h1>Section 3</h1>\n    </BentoAccordionHeader>\n    <BentoAccordionContent>Content 3</BentoAccordionContent>\n  </BentoAccordionSection>\n</BentoAccordion>\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"cf62ae1d6a12b70dfb6a7bd8ce66ed5bc6e30d1b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112132331.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-2Uz/7q9mjqEB13Qo6u61w2dT+kfLbMMRfzTB5IEVPOAhr7K/YI6tQA0zu6MwZM4llSDQwQDBnxH33UGEkqMjCQ==","shasum":"2579a5afc04efab9bf4d54f13a38c048a7dbcff4","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112132331.0.tgz","fileCount":29,"unpackedSize":1891102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJUjCRA9TVsSAnZWagAAUF4P/AtFktKqvR0FeZRUH9Tw\nI/qfxN0Jr4BP2OD3F67NohxY1iGrTdBVIoxjWDutajK/SgS5muO1BBHyaDeA\nxOcyluHGzjBjuWOKbVjaiC0CseZ2e1sh1NkrdbaZnwOkjpEVJqvgBdFMvk8N\niScNzGuGP9rdk1HK0nynvHiqTleN/GW3r+UlZq7oV2rtAldrlKsG4LpGwVII\n/P9uGWMnD11zX9HejWJ35OVYZZV+aZGkcZymQ8hMBQV/Xub/mb9ivet/hezk\n4jfQmtqw47UGL5dUO2jVaaZmw+gRFHAi4W64xpnE9an5KG7Th4COd9JCSe92\nzgGLmZKQ3PDq24Dm0jbmaSyqDwK5IymKI6jCIhsdzN0iErcR2BtraYcmYWWp\n14vYXpogDxHK3ySQaE3rifxTfVEu8Ao5pNQpyiLx7cAuIYkr/nvSRMrgikb0\nF6GBany5AT28F2y0r4YPsjh2h5pgxLESmguVt8MC48cjwWE+iD8pMwwIaORX\nLc7RIsvjxwbgigufUQj54Bvmh4YRbxdJm0tT2HfBjW6MuTQl+DWI9J0ScGRM\n39UMWfS9CZvmrM0QDPMdlX5rAyHc8eJX56DA5CxPinAZDT2MpIEvza/b0CU5\nINiX4iTZo9SDmnfSTVvhCKfpghEzybOxQP1ToRgikxAzBSjAGxHAHCVThB9+\ngzaV\r\n=9RZB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG1Llf9XDUnMNhFUnf1Agqh7rj+4GTD0n6w+I9vnJutwIhAPmaIaHxl48yxX/OEVUCXdHQ++FsS4LghpESq3KjYhqN"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112132331.0_1639486754857_0.6272203429648038"},"_hasShrinkwrap":false},"1.2112160003.0":{"name":"@bentoproject/accordion","version":"1.2112160003.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"2bfd164830b15f49d7d86cf73821410a039d9039","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112160003.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-hgHJC9hzkJsKfW1ptqkkPV8calVVxogbkfldBu3NTLXRFPNtFqlbsm6VovdAul1/PLaDkmudOZyATbft314r0w==","shasum":"eed4225e41b30cab4f218492606efad4c90d10ac","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112160003.0.tgz","fileCount":29,"unpackedSize":1891659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuy7LCRA9TVsSAnZWagAAGSUP/2Dg+/Yv783haWRUy2iN\noev7dAgex+TLalQV0KOFh02bwOwOJBS0YOE/NLP0rE5RntAGFGjy/2f4FCdV\nwp6Db5tDojYTK8A/AHmQtKoncXP7HfmoxKFxoKl4zfO6asFKv6FPju2RjXUj\nsOlNDWRlG2CTUHqFWQv2NM5pBwY0RDi/tdwF045iBp/kqrrz0wVoU9Pq/2Fe\nfCn+SnS+cs7f9oKEd/iAd0qLSojhdhtg054vd86TW2uzTxmbhLBZLd6NGgfL\ngMjfv7xIRDpJLKyIo0OSPKuGfJdpxhB7AWvo3Ccdo7A/sPIhRVxx2g+Myv+s\nnDtuQtYrwg0V2Q5DQrYbyuCvgYjmsLAmoqDNWeM9pEe3jDX1RatLWCALI4Gg\nVDv1c7pRZZXsxqe/4lIRXju+Q8LSagmLvGxev8O2Fu1nWx+0LoGNkUKJFty9\nT/mI+9QFPsBKNzsBeQL4OdXrfGpJQXE8OspGCKTt4wbLV+11q0lF7m6IwPJW\nYz179X4AxIaE6OBxd7VlXmAIH+gaohuVOh6nhTfB9xUIfyRykanLGflZ47LH\nG2YHx0Nn5iXhN89Chd+HTY3RUTpOPBI/FoS4vg9L1dPbJ4hqOu10EnPIyNNm\nKdf+D1NRCgMx44uJA+x/OUPFUPZ/4qoeggqubg5J05Ds+d8nrBN5Zjeb9VUr\nLyON\r\n=5Bot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh+8xrUyTViXoPq042auvQf0MTNzTWzfp/W9e0KOjR7gIgad1q2NMcyShCMFdLUGBwmS9p1BnlqRgE6pXVdZjgJOk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112160003.0_1639657163464_0.07140180381247418"},"_hasShrinkwrap":false},"1.2112162055.0":{"name":"@bentoproject/accordion","version":"1.2112162055.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"e3242ec094a87348831cbdd342f5187068444994","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112162055.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-yBks5k5LvpLbBIZhWKLb2KGUYvPmFWomyOnDhI8WeEOKf8toWCR7tCsweIf/vlQDCzwTFTF7u3N0vPY+8X2A8w==","shasum":"7d325bb6c617461404bd6e4bb1de312b7b51d14b","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112162055.0.tgz","fileCount":29,"unpackedSize":1891563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvH/OCRA9TVsSAnZWagAAK48P/1JtqkvL+7V30PrKF96F\nlML71tcBhvoT2WpEe4PKTW7O/K9ZzGPt5TxU3kAuIwqoutRFsIJQvX7g5xdv\n9V+Xl+oEj+6XifKjbpka7WWMvwjlSFkmz3i5uagCj+ZGcbUjIFhHq+liRsJz\nYQS4E7wTWhUmCmSUgeyf1vXwkgUwtfKV6yPgK3fG9owTNlFIxueC0tKxXCW8\nAmiKygF4i4ktKwbseJP1+5hTWTF4/THx3drCvRqvd6a++Z/kK0rLnNBqEtBO\nFfWy5bsBvD4JK//FUYaSqHsHvAj7mR01v6C5fdjZZvnc5tvCMGZwbiPEtZgO\n8cAZfNFJEfjOW6J1xRLFP94VV1EYA+qD7XDOzGUfvPXylg3Md0nwlNcvzHpa\n7jTf6PCiN4qxXOpTuIRdZv7e/n5EyLsVCRbx0lNTgLNUQsIGxJe2Ec48hSV8\nJiRf3BMge1Vru3/S2VrJTw8JBSLfVCF3ZGxRU7fS9zuSsDyonD/w+KEFkpdM\ncvM9lWgZmW7NMA68NBEEXAWpjA/IALaubyTuIR8nZIyFpd1Ep0vczcO3VvTC\nfvk2Y++szsOwaJ+1/sh9ceiH4ySoVRhHfI4NIyNK1rkpbfqWdO/aXec5Z1ER\nEHkqETLHrc2a8ANMNhqvWj65zUWPoI+0K/snydMTqCqkAMT+Pv9QffkO2Mxv\nfV/q\r\n=58OV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1uMkWOeCh8Nmt/f9tlN3zJNgrmeG5nwPgDkNsag+OiAiEAkw4w7jx7+RZsx4GK3//Ia8QUVuQugH9YpSEQDvAOo7Y="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112162055.0_1639743438220_0.0008652005574261157"},"_hasShrinkwrap":false},"1.2112170012.0":{"name":"@bentoproject/accordion","version":"1.2112170012.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"38e50237c04e29792bd0ccfdc13308940a873817","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112170012.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-oOcAiS8tJeGN9IVUH9om2uYK+vEjPOiBh2w5M6jacSgszs/eIa5iUhbt8txKhEnVPy/G+h2KOZySZumvQBzCTw==","shasum":"cfb0cc68a1bbaf6e5edd56931a84751fdd39e568","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112170012.0.tgz","fileCount":29,"unpackedSize":1891563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvdFpCRA9TVsSAnZWagAAo1wP/jSQ8qSu3KeO4/Z7mjpv\nEidWcZZvBU0P5R2jlo7GgQjlzQ+cFLYisEAw7/ddQAbFdMyEKRy+NimUkoI4\nRtEMtcMQX5aazz2KVebWxSQpUbE2La1e8evWGfGiGnmik22VqB4n4dD4yQwr\n08YgkIZbgMkVtADV9SrM3cEh3xM60ZJJ+A2e4UZ9soktkv/2OdGE6sWHh26P\nwFcVtvEhrbzwTilwrRn9OW+6T3goUqJGJB0JzIdSELsYRCvbxWLokS357H/u\nNbyB7AO9k99eftEhBFgT7gfOXQBPG+oOeSP25McHop/4AiLkwVgUpJF4NKma\nC65UBXZmQRXuix1lFh1bNVvuJ2oAbaVwH+TCEH001SETLK/BZaeZ67IXmtpR\npAy7JzlZG6uHeHVHr/jTMdy8CdIOQgIpE+Nt0Aa774vzPtu1HWf7Wx0Lo7wl\nAGxAwfgNiu6SwTwoCnHAXZmfSlaVeHm9ore5cX2jvUC2E14M5GEVNKjOdrDJ\naaTJ+DncjefwF0TbmvUa6PtISq/OlnuVS5ndmMR54tfjHw6rn0qLCRecIER6\nQahfn3b8EHqi2wntv5wej72/rsiCkMp4CgtYRL4xxeveLYz0enQX8493GORE\nrTAA9nj/aInVQ5zgNtp+HFBdGd8pd33xeoEHftcbimFh/D30V5mH4H2VX3C5\n3cyS\r\n=GonP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRHx3olxJDl1otMw97CCxYOoKo6YTjwziDOjZ4LjG6nAIgPLUj5Se+RAJiEjPzRHh15rfbXV331rIwMPLob7Rzgr4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112170012.0_1639829865431_0.9214426414815635"},"_hasShrinkwrap":false},"1.2112201724.0":{"name":"@bentoproject/accordion","version":"1.2112201724.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"a8be9d1eaab4dcebc8c170c9911acf0c8a5e73c1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112201724.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-xErWWPP+5LCfcoTnIFT4phIF5VEEC0Z+zKl4+Uo8tnSXDM/37DKNET9oUqz+XlsUNNZ9ZebmztH4iMYJJv0jjg==","shasum":"1a8c821dddd7c3459e22824cdef267dd9a56e5bc","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112201724.0.tgz","fileCount":29,"unpackedSize":1891563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwcbCCRA9TVsSAnZWagAA7PYP/38ferst/5TiN/y4+0T2\ncGpHdj/A0asLF3C4y6MPCvQeWeDVQlXyCHWQL5YFyEKT7lTS7G35nsWUE/6Z\noK/U1mXMWgWYKDl2Y/f8nvlEqeNLlumnRNjmLgZf6vJPnrj/glTZ6Jp7cLIP\nqj5prrzCCE8A6+crxX0n+rbEP128iF0nmugnAJDWALezKz4KqKIDETv3KFPI\nCV5N1JDY9plCr5NAa4vPe1RMOPIJh0rgo7/wl8D2WZG1P6PHDlzFOxp7/zzh\nQfqUKYWqHbnxiSpScO7C1hZ/IgXMr/LsLS/4h7jWLTRnMxvAsY0XvytyGXqs\nvyVzjQF1wOVMGdm+Gogpryi+nS0DgRGlM1ixr0l+lAkFdrv4IIBjgDsoeg+6\nVHVUbZmbHMd8SoLZU2irqdOpcCgCUvFgl6jKsLs4wJgRZ0FT+KiOebBSGQxY\nU/XrPiWjMSdpLSsqiNL3Vx+aRtA4fFmYdZRK4pqycnbkNkNAOr1s95TTRdO2\nktN29jzUTKEQcNp9qOLkzEvotj/y20toJLes6+oG3BYceZQsu1zFV6AG0gMl\nLwlXMAM9/eDczUWU4UHJknSyU+ej2O1F6fx5KBd/DYnQEGs5BWlvrzWpp4ik\nDcGrNSQusp7s8lls+nOR/Ue2h2SB9VCAZL02BCGetcYfXgY4dYS/NJA5/oih\n80qZ\r\n=ETMm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTgdTZ+D2AUUcaVfn8rJweMmBmZUu1r2olOa3qf6cRUAiEAyNeqXu3HZv1iGDcQ2mxHkaHQUxmDIfZnSrxqS1ErpOM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112201724.0_1640089282107_0.6080858314706215"},"_hasShrinkwrap":false},"1.2112212349.0":{"name":"@bentoproject/accordion","version":"1.2112212349.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"a6b6a6c259283b2cfcfb474966602c2ada072484","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112212349.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-h28txT+v86t3FdaaYlaqK2awSY/Hrb6/uAJSYFJnjZLvwuSOxpPwEvhT8sJGpJ8FD0GiJWMdPuAdhXjl7AEy2Q==","shasum":"38b6017d5b4645c9c46badc12609b85e363cf435","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112212349.0.tgz","fileCount":29,"unpackedSize":1891563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxi5CRA9TVsSAnZWagAArLAP/ieUuqGjE6bViMa0+05P\n665WEVaPYJe8pEuY1RdV2t8o7Rk0+y8ttacQkNhe3gbEHlITk+jNqLO5VEom\n+62AOr+rjRQUdu4CPxeWAsHSg6eN85NPtwZ2r/yFVEQHsQVuOVuBpscnF1WN\nYrl53H9uJYH6m0/146VB+NTycHmCRym5yDBPnE8s5JF7dxlm6IPBRoU5BnRS\nK9QwAJHQasxFilKFTuDPUDLo577o7SrywKmhAP0pMzfPv8njhbba+M/bKdjg\npeoicB5f+mToNoBOvRtFRfVZ++hNQrafykTf8TIVrf9S5g1YdtUZG7HGR3Zh\nYJWVTuTLm+Y4N2xwGI9uyamNwYjor4LmXBrkQ1LYB0U6GzqaUP5PVyxTKMCv\n6SOKV2oV0k0VO5anpfksilYcyezrITTEStJQTt554uyeLA707LhklDJ1kj0O\nXpVMiDPYZscgu2OD8zvCRQYe4gSO+QXhrvBbkjh/ao6r8RyAY7XeXSgjD2rk\nN/3vx6vCv95IZ7hoDMgu2MutyXe6L47EikRdBVbZtqm+QPaWQ6VbebdC6q1r\n9tA5DH6nHnMkqbI3qE+3RYkS5AxrSeKzoV9eWbPTrWKDExnm9kERFgz9RpSQ\nL2ClbtjkdlfFq66Rpq9i8hDzCQRNkawoTf9eHTHtmK+Jkzq6UH7zL63MgYQg\nCAek\r\n=1Xfl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBy4t5SxcLlEvgvgxkvOdWMU0GKBbTXRoiHQMo93dumiAiEAs/Y+J8T5V1QGhCy4NQYt11kzpuooKeWZ4NIyeUJpm0E="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112212349.0_1640175801342_0.4978040367931107"},"_hasShrinkwrap":false},"1.2112221739.0":{"name":"@bentoproject/accordion","version":"1.2112221739.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"5d282652a97695e5ec57a655f76c0cb6d40de066","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112221739.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-tmsSiVFEXOvsaJHZRwl3LyR/AehS8b4ZtNlYBEX2GXCe7j2pnWq7GJkTcW7z6dELaQKvWiZW0smHhslJ6Ov+2g==","shasum":"6b31365dbf58fe4e1e7be2dbec8f6ab382d81b86","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112221739.0.tgz","fileCount":29,"unpackedSize":1891563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxGkbCRA9TVsSAnZWagAARwoQAICbp0wj95WxFUjUDRop\n8uKpkIuP2OtWWTp8pPmT/2MJzpjSWoy7enknOsWef3LiioSrEiiUMiOiQbYK\n1++O2Vs9cefvw6vpCDW0xJIvGm3RUcU7nmQS2f4dZ7rXkCSD47smdHBizaBc\nc9qqSSeiTpSyAmGhFHltCc0VF8Cgvfx5m2UnbfwhOvyHfXCJFNSi4k4+y6YY\n0FxGC61qe62kSgBOGj3QjYjF+msIV8XajNny3XSPpRQVps7UmPQ9J96F+3pp\ntW6b2STGX2PSHcD5BgVEd5Aj61HWMaG7k8eB/Tuq/QHkKES7dFbl2u2P8rdT\n3m2OVurtVbYuA/vIlQ4BlTRr4Ha5OSr/7Db69HC0T3HwbJfcDodRMSX9QL2z\n6JkRvyhe1pN3XgerQNOO+bPRvnuUC3zA72leja+TyD0HF8Rz8Lxkqjibc5JJ\nrae2mQFHVPCvc1uededJYhjBtZmiUdLsEAZ3ojgZaiyGv8T8x854dKENBmjN\nJ9JC9tvS2WbcSu7dF+f9yav/6+fAaLYe0ZZHyfPOusuaED/5i8rKTiO+EnZA\nrlBywWDwGGxJCuPC4zWvH9UkUrdvS0E0Q0d56pKtvBUcCUyzByHLBysi6XIG\nzKiXPrVDoJXWdjMECnY+jmcXiTYdsUFfZhnntgEo46hipipsH67rWboZgJ7f\nmckD\r\n=JUb+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOSwEPuBq84YKd9k5ZX5J0+TIR9DfQxXHmd7/EAwsbXAIhALbbpO/nPc2tciic7/53mtCnKnZU/FiZR7IOjSmAMlP8"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112221739.0_1640261915256_0.5488321822438376"},"_hasShrinkwrap":false},"1.2112231523.0":{"name":"@bentoproject/accordion","version":"1.2112231523.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"3d06e61b6949affa49fa2c89bd550777f0fc8c3a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112231523.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-uy1SPfUofdDDyB1kRwacsV2gSMjqbqB8gadAzuNLfB8bhEyv2DscVj3QUdGtHR/Ne981sBCjs08yLGOpcagRlQ==","shasum":"aa432e580aec78811ea5a1097546cc6325a2c53b","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112231523.0.tgz","fileCount":29,"unpackedSize":1891563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxbshCRA9TVsSAnZWagAAiuUP/3mC+iqTcKBvPDnKGUnU\nXEalAbbgxqhVyieSlywm+t0effCv6jti3TZpOzXgkuUIArgmBSQ0TZuTYCxH\nIud/y2D/CmS/7Z8QAFqzcea1Y23Ks8llzFUaITP/Md2o0WJlfU5KY/5e76DF\nCy22YfolNTygv52vmxSMnxaq4I2YqJSUm6AtUmNsNcGNupuXDyezwaKAXMy7\n1fv9SsfZD26PNJGthSnvxT9pSHImi3CB58oOH/B4Tej93PJijOpgzQzACsXr\nFA/2zZqYxQoGKpl7WAAkRYX8DbKYWdUG/6n4dZfngMZC3aBvbX8Jo9XhRtVR\nKrlfbTBW4IxAXdG7Ua1vXND8ZekdIZmBiG3BWPQ1N/xBszjlTSOoW6d3ixNt\n/ddI/3paElr7Ah5Ccn2H8183VHv85VrULxbYksryg5C6dfZMPtKfNubZV01O\n3KB1NrBfD8WLbUeXo8GyboDE+jHoII1pejSsmCBTP65c/802t/IQl8Poq3E/\naet7iMeOXkG7Rt+n+c38tCYDxCWALpzt0Kng+PumJs4KZRbIhwIiHSmoKpb7\nx0udmu6goHYWxrDfHp2d9n1XJi4nkqDskHpYKytXvCTiSwzDNpB5M6fOB0Nu\nXUzzMhjPPRkspuDStpDxIVF6RVwUSHLycaG37+Ey4ao7bcLR06BPAOUShgEK\nqjYd\r\n=jANW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlrE7voN3psXmh5vQKg50+se5AxTkU16F/VK1V4bs4vgIgHMcDKuYX0iS9Eodr+pyrPgRdUL3IUo8y7mBlvB6DWZo="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112231523.0_1640348449291_0.13320879935032326"},"_hasShrinkwrap":false},"1.2201042109.0":{"name":"@bentoproject/accordion","version":"1.2201042109.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"9526fe41f7489e55b2e2a8bf52d6b0e4367e19e8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201042109.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-1F7OvsAsy5Mdfjt4oKosYCVOSh7LsUjQMXpnVRaQ33l6n6VsUGmiv+rMTM6qZJ16rVl4a7uJQWy8QRhtxieGSQ==","shasum":"3e6a8f94716512379aef5e882d40d399e53f0a5c","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201042109.0.tgz","fileCount":29,"unpackedSize":1861848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Y99CRA9TVsSAnZWagAAMiEP/2Mpw8cHb5IA294oAoUj\nleNwu1eM8v354jQSYkUdZJWt/uVMYiF5mE53HFvtSITIYoKRWjnefzl9scMp\nLXf8v3TiGWUv8SRNaN9XJrlEiTlwonT3WxVrEOFuvRgA1Zv5A2rf7MQZ9it9\n8WXziT/iGooDPbNph4Kbd/MhERdZ8EEhEzB7KHerAeYtZs7PrcX10mfpX8Mw\nHY08+M9jEY6PBDyUL5OvU1Qb8J7vdNO5wmlVMIkiFgxmq6YoHgwb6MTwluax\nucZAriZEpUTbJ0befEEqqzZzgqCGZxM0rHGfToz8g3VCCSdxvAQjOgYPnXBc\n7DCVWyplQ+BojvwD4PbSXm6vXdfHYhpQbTkrGlAbyGYQfulypM/PNRxdfBhU\nBg0UbTkvU/JaaqBKtrCtdZwUPNbbSTVZkAcHj6HR8aLvSM8cDjGF6HeSmiVe\nGOMr7v0HORS7oC7wkVnisQe4l82trnWc0iet3V+9ttovkacZhNUcJgJeGty4\noHN/JSPF5hHhIRXXTkON9BnjqvtV+0P/mHtBfHqud/NhZGCEGYUKaQLRz1p4\nshD4VY0ujfzx6RGEoFvnRJn2wwlDlfxmcdbz/pF9H0eOun7JKSSIEy4ifpuf\nuAPHYKgj43M2J0vITejFIIU9OLGjSVD4AxnnK+Au5+Gi2XaXrPK3vjAeIhNj\n831M\r\n=e2B5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGiFW5Z0hne6b/TPLp0d3AXB7Qqtuf2Hwy4CSy2IbT1kAiBUKPoVNsGWPvtHGmQ6kPaqzE0e3jyRSBbIq3VTwKChSA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201042109.0_1641385853017_0.9285522059292166"},"_hasShrinkwrap":false},"1.2201052144.0":{"name":"@bentoproject/accordion","version":"1.2201052144.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"09cb7c2c04a007089967ccf35accd80cfaff0c83","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201052144.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-3S72e03C9DNGO5cClRYUZ9KqAYI8uNzwZ7le8NWYwd7qMaWHsqG/QyFe5cp9iWRFzUUVWt3VRCmvf+g7X7/mIA==","shasum":"fd6d9de25ae9cbb98506c56a39d3e562a8def9ba","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201052144.0.tgz","fileCount":29,"unpackedSize":1861848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1uNWCRA9TVsSAnZWagAAro0P/2i9SbHUSEQ2b1TkEtHf\nS6o1x+ATraPuyDujI5RpXP5AnpmLhxXNiAHyAMNX/ZWlSSWVc+SEbm7v0psd\nWrXBKLaKBa8VYxSe966jV1gKGVzfr+A4MvBiu7NJVzgiPHSrxC4HDlt5fBuD\nqygSYeogInD4JZ7xNuw0EJH44UCkNEGgPMtEDGVbnEGe0NAEeqZxxbQwN8Dp\nGJ9njRP1DhgHtXc4YWSJTeo8Q6FdgZ5t+mxnmAmpZk9j8j1sxfZa0FGg++z3\nrJg7LD0Jnyl3Qidz68REYwSXQ6mgHopKpf1YdZaE2eu0i1xUH4ly1w50JiR8\nGVlSfL0ZQYP/JTeLPYYJkgg8PVKOMK60Q438TFJlN2THvlqiEO7KkzB3jyH0\n1ETdQ7eV9sgFSyL6RrVJQyAzvaRZzi4zJQxzpJ/g9LeVopUD/7UIUEu3m2nE\nKDnJufFUYysqugBlxAK21cYlRB/q27jr4Tu70YWG8kGxBv1X/j50C1C2Igvh\nAkKKU3Gegom5BJjqnkP18sO2Uqp83ZNvoa8iHNlFJSAER4f96nnb9rRoJW8Q\nWHlifblwWf2vZRSp8lEysiqIJbF97oLPFDESawB8LCEWZqRakKtWPxiZ3J5w\nw3sqLL1w6buCGdMqg6FIp2/HG9R4ozSiBnaXwnlWz9ZSdZVG/CINRRTXzTw5\nHg+v\r\n=DbSU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqFzkiYFG/0k8ZbQy0eUrMLgKwHgciBZmwycASgapq3wIgddTRYuY789D4Kr2v5CX605MG0oo04owNN4a29C7DcC8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201052144.0_1641472853754_0.423793435776046"},"_hasShrinkwrap":false},"1.2201061922.0":{"name":"@bentoproject/accordion","version":"1.2201061922.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"737b882748278c09f4270720744c1618e36be6ba","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201061922.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-CsRnWwd7jXCZuikQUHJJDnQSilAKbwHQwDBIZLCMg2xRxHnxVG2ds4Dsy/9kyBAIY+j54Jqtc8PaH46oEze+zw==","shasum":"8e597e3abecc4b73a63f654ba4bbd0766566b67c","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201061922.0.tgz","fileCount":29,"unpackedSize":1015854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DLFCRA9TVsSAnZWagAA42IP+gMw6F5piPoB4eSfYfPq\nZlUm0goVCOQz3rmTBA3VPHSXKVDUCTK5zu7FFcX9L2XeOo9c4Kj5FpLh2tCB\n7bi6qUBGf1u1nZXOKDgE35Og94dEHQac4mzEd0jLyfNJBvdcl+XGCahpOfb2\nh7CCIPrC3mORd8KqR6dJtJ09+XKoLSz/9ObyCrq5/DjXHmDQPmB5tLI/MSof\nboXZrqfDKY+ZwjMEUNLSQMrVQ7jozAx/YviUIZDHvRf/ZNnEu7JDxurXWNgw\nCo6QHcKws4nrAGYa2mDAbZN+4rvwo+en0Wsyt9GCDbIo21c6uBDDnHMbFeu1\nl/++azY8GAMq+1IUX0JEcyAvmHU9GAQOw1JbErywGxdX8r8eXLBoAkDVYVeg\nPBfH/gc2BnLJGmS93AAYNwbbvrM8BXjlEYKGvZ6k1Y6iJcvoDTYhavQIT7Zt\n/RD/P1t4KvsVf/ur+xtN9WVDvASoGnD6iTnNYlblGt2Nh2nAotXji0hrVVLi\nurRLTxj0UTSHTO66kNl+jjGS0/PlwymSNF2sSwN4kQuFK+5SxHlTkCSVL/83\n2mgDotIRKlby3msHU+aCrxAvZRa1QPMmAaGPzQCGvaLpl1M+MH+01QD3Fsfv\nbXVipCCqY/6kddVfYdVLs3IdU1bW0Pl1e145dKckvE3mwZU/2FkKUTxSGNT0\nbz53\r\n=afgI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5beUDPgyZwKGfyBgqQ+G4LRoxe3ERMxeHHKUtbDBzFQIgNBCvruP+Hq7HSRfXlHS48ZN3bp5Jrm0QKQAt202yeRQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201061922.0_1641558725017_0.76388957553856"},"_hasShrinkwrap":false},"1.2201071715.0":{"name":"@bentoproject/accordion","version":"1.2201071715.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"e40a24fdddceb1c635f67571d9cf513c7e58800e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201071715.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-N7gA1X4v0aZxExkZhd6Im45vQ0IMpB9mPdyQvsxRHZAF4W3JW1pY12HU/Nm0XLeGMtpPonU7Al4nefSkuzBQXw==","shasum":"908cf54831dfc322df9bd1b61bdb2af8315dfeb8","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201071715.0.tgz","fileCount":29,"unpackedSize":1015854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2YHuCRA9TVsSAnZWagAA+xQP/3A7AW2ai67uD3PXXRNB\ngTMj3QSJHyUYINVUcib0ljTPy0olQ29LNpz3WkwxiAB673V7qzEfWpkGxnPs\nmQDUTNeDjPT/R+5G+LeX0sF4SJYeE+vWiv23PFwjTgnp4YotcB54IPgy3XES\ny/BWDNIjEvFMBTTOqY1BLc8Yo02xZb/lBRcE/A2LMSUecGzCNwtj+HEqAAmN\nE8ob3CDzOXVutMC3MK/L/m/aB6VATLZTV9jKywBW8onFB0xkz1rK9H9wUxHY\nNgrfDF9+6wNQqriD+c3mW7pE99VFDkC0EhlwjWO2UmZ4hN2n1aqaJGsZEUoV\noKY2+CummKbmkZ4OCTqTowecIk0Tgue+a6iRkiJgU9CnrLaUmPSaSpkz7tnL\nr28mLnkZGteaGFWPfqVLs2OA2sfv5Ivugc/XsOJcECH1LxBn5NF8QrQKT4RO\n0SxKl/7kkwl60tGyRDiygNQ1asEOCkui1Iu3TrPJ65MwOJxwsG7DjuxwvRnp\nvLPdYEwyPxi4LRi/jXeAeGLJfnF8gjV/hlPdW8iYt4pCWnlYBVDhsveI7KKF\nGdlEMKX9mXMkjpBBZMzG9tUhLm0XCtBYbfeeP/7pXE6fVoumI1WtQZVrFeK7\nRv4JRHfiMymRh9yEeevvSLD757Rxyq/5IPza8QfElyPqveaLqd6wPyZaLsS/\nV15k\r\n=8IlM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUoAj81lThbHRd4imqU5fsvmpQd+71pjwWmnoFI/ywPAiEA5iOJ63B4SDFNuHQ7y2PTkI0MbqnYvhhqcQ4dX5aMnM4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201071715.0_1641644526337_0.6718254985826633"},"_hasShrinkwrap":false},"1.2201101902.0":{"name":"@bentoproject/accordion","version":"1.2201101902.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"f0b7ffe685c60b51cfbab92bada4e0c87e0377a1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201101902.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-upFOY2xAvLBiHs4p5MD4Zu0kLRGZcisT+ulvucQpiUk8EgQxfsLzlFCpzbmL+7wHgMR00RLh79hw239g/ct00Q==","shasum":"7c964437dc15a969c8e7bc73ab5b0958fceefb27","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201101902.0.tgz","fileCount":29,"unpackedSize":1015854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Xg/CRA9TVsSAnZWagAAmVkP/0v2TjOYbbSrB2RGHm+N\nnpR5iaSlqWbSq8a//tA5UmeXYoIBp7TJkceVZ9A1kVV/SCFRI2jGb9Qh8yHo\nRnKdCA1AYjUusobeIBpoZk++8H7y5MEWUOlzvgglB8+K96a+YVdqabszUlad\nQ94Db6v9Irnrvi4fju/G77blmeCgM0Ln2kUwl9g19qPUhgbR6zmgiGX+3rHW\nu763KdXA3yz/kYogT0X515MwLx0xi7e8PCh0MQv7gl+5WkG65izGJIrRk2Aw\nEwI6WVpJDPVXgK+R686BThafcbgktP5VUBhYG5Ws8iBKsC7TuiAIRNex/YC1\n2N3C8hYuCR5R0EFgEki40Fx6fHhFBb3/uJTTXgpPHuIhIAI0wE5q4xLc86eh\nUZ8/Kx9wBpcdVsYkFp/F6hKJ8YymQJEAUFZzc9tZH1Pi4lBMBm+f0HZjwxe0\nCEb0bOHv87VDd4i4jUkc8pP+GQOZonVY+kknOg787B3ol3egDsIKWfTkPbKM\noTWTeU/9FsF6fUN4mbGhV4rMRGTkgg8m/uFHw105zbl7aHomi6bnKL7MrIUF\nWiu6SNwMh80e6sRDZCUk3kBgfWQF5WE7rRAaxxXnpHzXvPGX9TDAmbyElAMO\nVjmgNA1TL4dtJ85OMhlltbqD7WODi2Fb8ydoN0z1fOjpg0EMY5EkH89d2nir\nkq5c\r\n=0stB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlD776TmtHT80JXyQg7jQslfQvx+WkYP5oWo9kEouX0QIhAJeunGZMuH3p5FCshEq/tgwRBnBa2u4G9KDpznUFaXhW"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201101902.0_1641904191672_0.1913039661456737"},"_hasShrinkwrap":false},"1.2112231523.1":{"name":"@bentoproject/accordion","version":"1.2112231523.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1ba2e6854831868cfbd5aecf8a74b09bb0fbc2ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112231523.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-DNCjNrE2cchv30CEwAT0ugQHHlhzsjaaIP5+5N9pvYyDd4CPLIYVnD9kN709XINdcRgsskF11cZl10DjCAxt9A==","shasum":"861a1ade9226536c69fdc0c37a109707e335ab91","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112231523.1.tgz","fileCount":29,"unpackedSize":1015854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3dm4CRA9TVsSAnZWagAAcD0P/ivRMJc0JI3RXEdR2sBf\nvMYF45v0sMssq0NRIkY6tY5VSspgzdKGw36JNhnS+Ry7pSRxqnLUnoJbuPcq\nBJM4DWTizQQSIYkT8ECNTgGfH0e2RwKJmVTj9Sgnwq3vVz989UP0WiMYlmPr\ntHuiQQ5Ok4nDx3uovu0IRIotySv5J2yus4f0DaJn6636EjR8ijTWwV8B5TV4\nXlk7j2Dqt6IjN3BmUnv+TTneSwVg26GHwkBjMa2GtpNi9+sLkfE/ahnivIUT\nIi8wwI1uw+hK8+QAPwJnnPkypb+fqX6DCMfrd2NgcJ3OCC1lYBYWH4sBxMvo\nA1MZmxGtCNw+xbWTHXRPWWKqKkgUYJZvKD3JC0B+drTqnYqT3TQpAWJOygQx\nhQCmpfsmPdK7FJYoA08DRGiB2FaWw/OAZIhZHaux0puoTPAGtTs49r4/BRoo\njHvmLMl/6Cqy4V3QB4LVZ3cIJGVJEt7nDYOVf9+p2SWsDNZp0B3Tzm5pg04j\nREs4Zc9gLe2OBrW1EHpbwwvmHp1Qu5hzuOLRI1OUKDg/nZKyPmp2HNBBj4pb\nCjNbbla78OzSLW4b3ZRizUcKApg4oiAxhIpZfqlez1DT/H1pkpucbF3P+Z/z\nvPjhjKMvlTtgu7widg5trZZLX4/5ua/joik33SvPrR0IR0DPPNcXPeNT+5M6\nuwd2\r\n=Kli4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7Knov5zOc5qk9QuEum/tM9ILoYmLUNc85Bw1X/eiexgIhAIFz9rMzbLw7l94EropCw63NBKwSIAzsnVDBn691HvwZ"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112231523.1_1641929144080_0.5535871821067804"},"_hasShrinkwrap":false},"1.2201120015.0":{"name":"@bentoproject/accordion","version":"1.2201120015.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"c592aa0f3999a8b6109a8a31a07cae6a83115d8e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201120015.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-SIKcMTMjZYoTbzACuYtCw/awTqSuwZ2ZQPmBEUECopRB5LyjN0KtVpy+zhG7eZ/JClX/PpXKIlahUJtDcuqhUw==","shasum":"27834ab76e9cecb96e2bca3b961b26cfb5a24eb8","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201120015.0.tgz","fileCount":29,"unpackedSize":999405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3sneCRA9TVsSAnZWagAAtSAQAI9RvmUFiQWFx+mB6+vj\nDn7xd5HNs9cro24ywE9+eSJKOIfgi6E9p4D2uEIu8rG+CzUYYvjUepKlH5Ad\nCzgAfGh/D3hQDa5eeI3BzQN98/c1oKn56Cs4GMUhPot27sJhtvgJacQAktWO\np5WEXdyu6zs+CYeTJbUpN5Cq8G6R9/kEXoM9iiQ1k80bBE/obqXlQ3viV8ut\nQYYVVFpan+r1OQD7ddaxfDpxukf0lfEBevoIGKAPKBBbVgrzi9DQSmFzUR5m\np8iWDZJTzYxr28VZgSWSONmTYeMcpl6GQ6EXE2n1a9kpmUfuoBUEpEtSjGue\nyZTljh1URhEweVcTC/Hm1BnqnajtbRAMAPO427p/4+UWLMdvttQ9hiMsiUak\nsaDLYUBaNa1VCiRvHe6JR39pcRe2QQcmdV9eQzUfz4r0p70wCUD5cV96VsWc\nh5R9TH0VcbyynBPBpNiWPmYJwIcG9GFzB6UZGLgoCgrFUshF5iDTDfU6y3Wi\n1Em3fB/EN7Du//S6eX3pM9YbShz601nFGJQKL4oHyphpEi3/w2SzxW/7i7bE\nIt+N5Q+C9sRtzTpc1FvK46MfCMH3I3xdAwzXtlO8IBj9s2HT6BxB9qR8ajPc\n5I6ENvDf2trCmndnHBCPHt5Wz0imQrBLOTryp0SZt3eMNVY6FBiKAJV83ycD\nyypA\r\n=sZtC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqd93SfEQtyfJuT2O/Wq0ERlKa3uZPB2p9CPoWw5WIJAiEAntAytPVd/SOLgk32EBQIHV+qhWlPtBP4PRuBQoIML/I="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201120015.0_1641990621941_0.8186614086474686"},"_hasShrinkwrap":false},"1.2112231523.2":{"name":"@bentoproject/accordion","version":"1.2112231523.2","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"036fd40f8ecb160f2d6c65688c6ff4765a670bf8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2112231523.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-sOzh+UaHTUg89BZhuy4AA64boSQTYh8QXNkNIIgj8tyD2nWRKkJVfmZQa9lKQ5n+jj3o3yAQoVlVZSNZi3zU/A==","shasum":"b86644b305e0acb09f6a44ccdb3f5bc28e3de710","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2112231523.2.tgz","fileCount":29,"unpackedSize":987087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh31h+CRA9TVsSAnZWagAArdMP/A69NHjHITHjB8raoVca\nYz4juCAqtcvCrK1tFCa2DSOHaHAxG47fAiTu5duNaAdE8MkDa+h9bKgbdBW5\nLIMF/r1c2W7uMqWJk02e01bZqx08SaBk83lY6qEYzVEv96MOgXw6Bc5PwsU+\ndZR0i5EjMJAnVDtqmxVceMAhSqieA6DIgr8bxXO9wRP9IMG66B3S3A9kZb0t\n7DAgIEbBEtE9iofZv0qBzEvQPh7pfvSYv4pBFWbGfbWWLmKebnzpnzM0nvsD\noCVediJFlArDhMIo5y2u8juoskDTW1tzeNcEtr4nNnjSGy+GE73Vr1Ul0kt2\n/102XRD/iBD3cjvV7ILfj3d+A7TA+7vQ+/oYHOc+b19d/mEnSq9+uC4iciT1\n2Ss6zsaQd7Qpal5eTi7wJ4tXb7ymeeDN5Aw34pL5eBAGuMCa/o1wscGBjteT\n6L3sdEQZMRsQ7ClDp0pokQ12wRMldZ5EIfypIrwtrKByFzzEL4ToBYpJdWwv\n+TBJ3WxUmxR6bYwFmSQE7Dmzsr0UCu3V6xFZ0hb0y6C3EAVSFs0VY7cqnO3n\nVHMlqSSdF6ETby3yxXAsjugdgvxO9yrURQmxFJ6AW7Wdib8Nej0dQecFGy+1\nKJFZ8NzQy6HUzmdj3WYECyyvueSu9aMZnvrwUzVkfBf5HPhPqAS6hqwaxzp/\n5bJi\r\n=sz0N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQ9gZ8BlblUIn7pHvPnOoG5+q3mTpexpyvcOiEmKtnyAiEA70PAKr8Ke13Qe8DOFiwkf/iiHME1w2JraOM8FEACYfU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2112231523.2_1642027134453_0.6232813245155724"},"_hasShrinkwrap":false},"1.2201122239.0":{"name":"@bentoproject/accordion","version":"1.2201122239.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"c04895bc1c2e1d0b7b874427b9bf1cec2b4b9f72","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201122239.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-evQ5qimj0RLKdwlDibjKshULWKPJEWv+IzcTinfn3ibnKRpqsvLeqnilouey7E3Qvp73kAv5aQdX8P8uFM9ziQ==","shasum":"393f3ae728510885488c99bd69c4ca4a6de453b1","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201122239.0.tgz","fileCount":29,"unpackedSize":987087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CJBCRA9TVsSAnZWagAAy00P/0fOikxkQLVi32dK8uPj\nWypQ5fX4e5Vxk9DXoFbMONET2cltGhebzgV/9Ot7GEiG7GXSt87My0l1roIG\nvsOeAlWr/rdlO/ANpYf37fxIDIpijdtm6e8gs87Afv7IDHq+gzUYbkwv32U5\n5dl/tdblxMbS1mNTOOGe3SiKzzaVKTC0deiJVsEe6lMg5bkTi++EUU5KR/R+\nNpFDCN4ZStJd0/s4UrDmCEuW45CDNf/u6+v2+mLD2UT1IUVZZY85PXalt7sH\nvgkvGyXybmrX0dJNNxfjpB08mZRdIHrieorWGe66aGpX368NJRcgFeviD/hc\n3HGmRT8fZoAYFqzbwU3YGENriKKmLqeGEWYLkYIqIwOWMUz9JBmEXN9rOj5R\nN7cgs5xjNMTz6F94r0UirTYTZwkQt5keaHnxV78OMC5HHuKzhkeYkkFZNxA1\nKrhpDnp1p8YdIkiKSmlg9Tce80Qb3oKqQzM6KXFjddGdfm1TjWwwMVZuXHpI\nyzKHkXninfjBlatG0N/hgT1WRZBuNyUq0fkUMVicVe5lVw1+qAQLPPmcgIjv\nnV/F2hhH4DKy49/zMuYj9SLf3X9o6p0FRFBjs5eGLfyeY6t5P7O3zh8279F5\nMQTXsfMvk12PEdol/i6RVw15M8k2WrOwaeismwAitEirRkXBTwfsisxAjnNh\ngMdx\r\n=i23Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD46kKEEneNmTkPt28JQCAVwgJ6k+Ie0+zJtri7o+HUgAIgHFUxK6nmGx9/qcpMJ58LKbc2NP8kmobzNHdehP6N3WU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201122239.0_1642078785538_0.9471162670897184"},"_hasShrinkwrap":false},"1.2201131702.0":{"name":"@bentoproject/accordion","version":"1.2201131702.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"e9b16ad7a5cee398ceaabf6ba7990488624e098b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201131702.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-BHZLbJ2ddBKrBcYZby4/jSxlRjRVSSheaM+eISxNnUm+66L1Thx37Ij1Ldg4ootnHqxwF6KzVlRX9tKFAMbecQ==","shasum":"2e5a0205997a8867a952b16a18bfe2b5cb7d5242","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201131702.0.tgz","fileCount":29,"unpackedSize":989981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4XS5CRA9TVsSAnZWagAA48sP/1IL43r1XCY57HRjDkhH\n8HCvsL6W2ymN3m7r5CiB/kjnHh1Fhq91l3bz5f5hNkhN6O95zMKKga6OAHUE\nspvfBM3p6WP4vzFs+7JZd2vKFK80Q5IjZi88o+wP3ZjPoAy40mIc4S/h4pH3\n+bKq/CGRimEPYLwEcNYhkMiOuRR5zvOll+y3IB4ZcopLzGK0xWerV88p0JRz\nwtNJzGqJsMtR9hTJmJfO7JjJeFOcwCMP2hhMSu300JMUmAMSPg12Eknvrrw+\nUtshRW554nYifQB6JhkoD90f/mu4g8+l0eyUHcV0eMJejzlvVZO0dkP1/5/R\nd6WTi8bM/O9OXeBpL6bTszq53CQMwL9vfPj6urwx9PWsszOX/aOAWq737IkK\nTyo5tnHQ3VUVIbmger01yrJeogJ4omjmAXYLBcz7QwJNRQnbpTo6qxZhKD37\njH952+PsgPJ5/lB1aUhw4jVRhcuby9+tX18J8uegjywIl403sCAHG2ArkfcB\nBiRx0V57VAjepWWDKXhi148iLl5WYOHObSIkguHWN9BVciuR6r6P16c3Iw8d\nqgxXppwV5kH3Bz/ju1w1ogoAlDwbO0VRvgrDF/wxgK+wzHwTQOt/I6OEJfDa\nzHMBlpxkjbQJ1jcBaaViFEplD97pEXXu5jFS35TuqWW63uuIQuxKmQIxYwbR\nWfnj\r\n=C2C2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg8FGs4jXg6IuYf8usyhcf+2UwO0Sk6lCnVqitVL0mdgIgE2ccNGbL8R/OJtFNq2HcL1nflTD6OrJNuVF5xf+dRx4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201131702.0_1642165433168_0.6132513502385746"},"_hasShrinkwrap":false},"1.2201141909.0":{"name":"@bentoproject/accordion","version":"1.2201141909.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"96bebbc98d1f79b185c5ff6c58442ddc2092547d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201141909.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-YrJOAgO+PuvygxVY93p9yocDicnWaZK63oRJXHMVA/tIUWXm7ZrS9n1ocg+h5ySwsXFlTL5HlVb10PNzHNwEkA==","shasum":"0b2f991f85e6302545c052f5ad0d0bc023000638","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201141909.0.tgz","fileCount":29,"unpackedSize":989066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4rw/CRA9TVsSAnZWagAAfN8P/jTEn2l4k0RYzRvzVGpo\nnYvUrzBYhBqJhOuXJ/S5CW5fJyNP29Y0mArnms0keNi4yNQpNMhhDAguKAJ+\naoGvqweFon4iOnkIRnI6kkxk0N1oXu36vbzwB1Jzx1x5KGuFz+zoJyPcCrBU\nZOWnURdQIK6ZYikI3oMti1pj7whgjoE4w2IEF96nlhqPQmCfIVUohxfxuO6Z\nfPVvhOHQD/cP+cCdBV13TuQgH7ig0L3Ot5zxUOUmSqylHOeXHcnB8lM+Ki8j\nrS1+dSrJNrcPSjs3b8nX/1jdPlWram27M0cNx2xo2RH2T9a+AlDLIfWunujy\nXHqvYn/xqCyKAKC/T89pBeXfSYPpiC9XkV4lWAISm1lbtgtI0dZ8U25BAG2x\ndVKxOLOkmHT6Z3CHl6xiLLsb+OJzy3ljQag1Jcm8XM6D9N6xHYibv0KRo2cW\nJcPq0BdZUVG3grpX4EoBJX6W2G+r2CJsqWChbgtFg2jiJHgTP1CayDgnul2V\n8xsmxUhGzlOQZLLS1sS5lFkX5SVYz9RXT1rquj1Emzrdw0YFBxo2htcJYVeP\njkVEG4v0P/3GGb6L/cFJBxpHkAKDEKvAepL5HOtRq4ra+NBMT+hkO4VB6hyH\nCa8kKJEWNhyTEoqBXboxWiHb3Ltf0mPfvMn38zyZ1kDuivE4GQ2GD2DvgfvP\n9doj\r\n=mlZ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsQIfkzqkBQtMdh33rLJtLLysZur5z6w4kSm8jmBBS/AiEA94dhuhKhkgFamxZx10snRZnFcZ2OqO0TIPPEgzWN0iU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201141909.0_1642249278916_0.2754361763896689"},"_hasShrinkwrap":false},"1.2201141909.1":{"name":"@bentoproject/accordion","version":"1.2201141909.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6474ad58b0a7e1997cf1472b09ba21af402b09fd","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201141909.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-+eAbZKuojeXlWDvHMbqdA5qGb40bQjUowWv4kDLtmBz2NSdEkZNrDiyt89bpkzp+mOt2YdC2hAUS+X7DFqBAJg==","shasum":"819361f2077cc915898a53a294d9febf77661d96","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201141909.1.tgz","fileCount":29,"unpackedSize":978390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8FRiCRA9TVsSAnZWagAAV+MP/3Vcj4bh9sFQPM+cN6Sp\nhbxF7jter5oUCZ0tCBFre0rOSdgNvE9l3FL9aUcuVzRHZcvlMtZK3Q1GZuhz\n9eQVRtt+RjkFGGI/lXZ6qeTNjYVsPPJcAoGrBi8E6NLYAVk9aslD4YBbPU83\ne6ptITZSYEQsRmuwOYlprPY4NW440s9kuMpL/VBjBQGqdulc8/nXtW+eyqhp\nuM6q+v0Jmm2HfQbrOiIBI0LIQRJpNxYt4qWHUqdSXrxjaGPhUaqPi7gGTlwQ\nxffeLr6wql8mVXYLaQ6//pygWwUc0aYSmSTawPgnEe1O++bJQxhnVEfexTef\n+0xwYzwwvlF/7HdvXI3jpiN7mWmJS106rvl7cf1OdAgWyt91ZNtEe9aGHoSd\nSIG6CWqvigA/YmJnR5j8hGJF4hY0zqxxXwpaeU5883BsdqnlRs9hMRIwLfBT\n3C+Q9KEFW+MwidCKkd7GLAmUQHqVbvfLUNcKNIoGauZvvLUejmy5YlevXHy5\nZLkwOux4VaMjcg6FbHRxwdahUtM9FOegWHiL29vmRJJ1/JX4OcnvPcJRUyQ5\nX01JNCPftxSJQopMndMn6yCH9ERK/iDdNCD5nW6iqkZVQ8BTMwG2S36oR0RR\nJTktrX5pLqgu3ieW2YJP5oBNhqkplVR++oboJIu95gRPiZ6/WIp4ukEF1Ob2\n2MHJ\r\n=nQT4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnxQeA5zxmqVCst94kbuOFYFnVgSWzMLDqI8xoX/kWPAiEA2NtdPkxMYUDbd7wnNoBQNrepFir1QXq2PLUAy5C8ejY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201141909.1_1643140193778_0.22706058230718185"},"_hasShrinkwrap":false},"1.2201141909.3":{"name":"@bentoproject/accordion","version":"1.2201141909.3","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1edf4ae1e7a533868a19fad5b3b4da9917432bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201141909.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-XEu6OQ46JJMgyDNfQ1Qpwh9kE/Vu6MzQtKAB98qYTwKGAA8HEBG19TQCEyIP9QvnIGbpqpjwgGjMo4ab+GwioA==","shasum":"157ac8db6f9642d3f0476f2f6c0ea47437084317","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201141909.3.tgz","fileCount":29,"unpackedSize":983710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bYRCRA9TVsSAnZWagAAn78P/2IoVr/uWOTZGhGG7Vs9\nf5GmzihgnRVTnE2UrsizdsPrwHX/JBZzl6qqaKgp2uih62peYtIN/dLcrphr\nT9haL460iw8rqHYmxUtNG2x2NiGDihN4DLoEweS/FChlhXLW9O3Rt//fZR/l\n2/u30ESKE0/DxfEpGAgRZKxhlReBQgdOL7jsIMPrawdj6+B/y1cvvDBFUeij\nHXeHI34WzejQzubIx9HMAg566ICJQ4F5E6HG5SIL9PcIMbxHetZipCRLULEg\nMGQTosvxccqJks1SuJFCppQSNPxRGSYxNZ2U6GVw1ADLhUspJgWWxM+DJzx2\n7vpekR9b1NEDxdGI5vjuJJ+lsiOcAnJTnuqWnubJ4VxgSQixCKK5yFi0d8GS\nddYJUPFYRnJxkZMLZNZDsaRFCwvqNhJ5mCxlLFyLSBWJlywifqTgTGZSwz3E\n0zyvB9wqwsuQdcNf0hvd6Jkdqu8okHi/NS150v3SNilaJqsRIHN6MFzfO2XP\nl29/muLba4o7VPFSFoE5EGqr55ozCzQevDeibMLJEF0yp0uaZoZfnj59kR5O\n/1BgvYniSAxJhegwsm00D51EcGPIvNB/IZTlm5ovIircmViFLkE2+IUQO0li\nJQuqwFwtExi7DHZATuco5lxAL2/O9v67yj5+wESFbNROIAp0/YJrVgRrO2pX\nYTdh\r\n=wY8Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMRwdmATcRVBGXFJt4xY/UCtaL6nMJOZsbJ4A5kuX0CAiA9LW46MnxVsJel+Cqctt1XFCf2GmjiDgNQ3qWeIasvMw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201141909.3_1643230737450_0.46232585726948083"},"_hasShrinkwrap":false},"1.2201141909.4":{"name":"@bentoproject/accordion","version":"1.2201141909.4","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6e60d79b180fd0983c9644d325b45bd569c6da2d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201141909.4","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-3xef5tOk+ovaFk4T2HlBX8nSwQyEq/Gcit4vVtzPgCNW/cMwajcTQCgoCxsp140YHNneZg2ofMZb0743XaLQtg==","shasum":"d940ef786b8b56c387b1279418e471a2888688cd","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201141909.4.tgz","fileCount":29,"unpackedSize":984432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+ag4CRA9TVsSAnZWagAAVT8P/RBf0lOr6BrvXBE2wHJK\noN8cekgmVf/irWX7F0duToHMjAzx3H6kCA7F9JvN7LZ577bHc2Y9QzuBv/CB\n+kKODZAWfSop+lwr9jtUNpxyYVeQahraVQcdYV3rwaz205OopLezZhaDTTZq\nAD3yq4c7ScurpXOzx2t0KtENuHeNhJmKV5m4sCYwQNBj1RhB53I883bvf6kn\ntHnFRMCSiiNSbtYWkgGdeAsHHotIyqn2QenkL146t9KiRGDIe3wkWxRNPOmf\n4kYZzXppKYoFdGUOS44s1mPBaksVPdZ4Re6BsrzvOoiMQNR8QPEw+yVGq/OG\nftIGK6/2GuVVvzqwFZbbYF0VUdsykei7uyZ+ABvBbKMf4LX7euDCNt5+KBxU\n1iOkhPyeP38l/sz2dqKuR3u7LTqL5QLS0iAiiYGIdQgDzrBf703dzjghVMWP\nWtIo9CEuMVDJjHAPmiWpCn/xpEpHY7M0baC5ngnOhkjrQPhVkdKYOXQAKLSv\n0ZorPVtEKonVwvZWtm4U7zct+Wr3NnREEk8x2d4foTy2R7D69a7iLTZ7Ezve\nhsQfVTs5Gg7j7x/RuzS7zZ8ZEuWMwpJYWqy/nasNrwUb2A02TETxbEBbPyTb\ngPWvaT7QzwI6RAy5VqjaePMk+7kBAuYCH9EBGAwm8vdzY3/us7w09z5mtFSc\nowHr\r\n=EP5X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFiMTPNOQuqjdrYAcOOsQR4lONhBbgwg6r2fTU2C6Tk6AiEAk3ZURNygnm6gFtBAoj9E6jq3b/JCIgz6YxkxfpKvVA4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201141909.4_1643751479765_0.15694818572143876"},"_hasShrinkwrap":false},"1.2201212122.3":{"name":"@bentoproject/accordion","version":"1.2201212122.3","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"ca1c7d4b4b4a72f4913d7c304b5368187458574a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2201212122.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-njsElr9ZPf79R6NDbaJt4y0jogk2kj+uwz1P9vFCkUHVabsXdLhXFYmVnUljSqxj3urP6jNSOvIoiMC9ffPlEg==","shasum":"22679617846a7c122494c5074077b3c36f7ff6ca","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2201212122.3.tgz","fileCount":29,"unpackedSize":984432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+sYuCRA9TVsSAnZWagAA15MP/2GFNfv/QBUgvkn3+MRa\nocwnNxUy41zOdA2HAYWGFSRerg4RFfLkwE69gs836zh/RdsAxNwypzw/76Eh\n7kyfyCt1c0AMuoV8k7Ns8KjP6QCLlND88QBTMdFRhHXmhBwwhzN7NyrzPG8Z\nU6zG46DOkrMB9Z7f2UUbd08IsiW8g25n/nqry6dzSgJ1XmqnD/xoh31yimtk\nhVeHuMET+tF/oU1JmDGHWz9kEczBZr10wZZCQT4LcafShXSGLqFwddI8YUC7\nC71n0uVYscwpRAnWKLp1NxXS8BOimGH4WdIXdD3ty0NIq/VzhAoAeOYf0Wsn\nkzlVlAVvW0j8daNIMLzGpzTugq611pkNuqwivnd3/b30Q2n1CsqLUrf9X1YY\ntNS3BEopPewjG1ScTZ8HyxGk3++P0z03oY3Qb2grRp3VJ5ZfKl7OJQBJ8QZE\n77THXv51cI8/m/65ZJeg4b0qCKdMNy1yXNyyzn+O1XHaTrZqLXOyhqUjwI2P\nWYrJI5oK5s8YQgNzJK/054uFZ1OG0R4aggk8OS4QCDyhy/TonvkJ/QlaG+Wl\nGobZ6jEZw3E/pp4i/nlwFB79Eimw8TQHBe253jviz2WZGPPMlF79WQXFEhro\nVB+QEwxQQhbKnlH5aVUcGngoHuq4Etz7npV3oc3ruq2v5550TRbLzccTSwL8\n4RSr\r\n=Gq2J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGnbVGvle3waQ6meIvWNlAi3rb0UacxxGYOohi2YKBU0AiBOh1O9CNP5rRAhK3DjIbtYTctDDM04f/5SDm5A+pUcUA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2201212122.3_1643824685792_0.8414380500350191"},"_hasShrinkwrap":false},"1.2202012258.0":{"name":"@bentoproject/accordion","version":"1.2202012258.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"fb0c4a54446b5abfcc53d1d446f24370c05507c2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2202012258.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-36ey3OQp2/l9pIpFNVA0jqUG4sIVCMqsAttnqLtJTI39ADre38FRNu/bHVTXhfF4bft2kNuhXxHJDhTpU+4N1Q==","shasum":"6fa430eb577aaa6d4383312c95558e10dd30b911","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2202012258.0.tgz","fileCount":29,"unpackedSize":984432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+tfMCRA9TVsSAnZWagAAOM4P/39iNCeAuEKR7OFJOb5q\n1gsBlKdvgaZ9Giwu9dd0b8F/vQ0HgzXls/RTlp8CUGuWEKqJRMLi/ebrMaR9\n3ZIviBt0fGfzkMyieeOVJnhRAObu3Aky0v+oMZNimCpN+3ktZtcGUtPEYhxX\n2Kgs+KViX69kHytDKjHE6hdG55hqOV72zeO+JuzvLYDsW8E1au68joxiN2LH\ncALJw3Maa5pubkc17EJe7DQlzuQCpCHUwlisNVGI6YZezYsTIzqIbQVkpLni\nCDqgXR0S+2RhNJvl6naxywnntYV3QsmBQcJiS/MXdb3wo36Z24cNe75tn/Fn\nTEJgV2T1hUTYa72a2HjQlDDxg1toL3jpGdnnkCyS7Q5kMSCKE7UvEaG6s97s\n8St+bcskcFR8lsB7SbmvG9+qIC26M+SycYsOcGkbESWbIi5gzXuW1PxEwELA\nifSD69Zl3nBONcqG3rzNKCxRZsliLvontuhXAQkdKuoQBF2VdbM2jjpXFK4C\nCBCze3HNstAG3FlMq122KPetFxhGfLPXr8100JygdUWbkgj9MuxnJX+nraYt\niuYS7wn6JyWZDIsGvD5CZcZUQnqcc0OvxMEljXH4nhtAmX4lu0epiGSCQVOd\nhk7uhq7qn+0kiBjArU6VZt3OQLjmee0TT0RMCPkIjukZ9u3aWKC4unfVQD8g\nIURy\r\n=avHi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAGweAcNaqcW4IDwrOLgKMxS3Yj+Vbc5t7beXTlm+yDuAiBi+iJTPubKw39Llw1zvutZeDhHIWGJCqoQLme6B6Zjbg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2202012258.0_1643829196213_0.9186534453058894"},"_hasShrinkwrap":false},"1.2202022130.0":{"name":"@bentoproject/accordion","version":"1.2202022130.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"76b8fbdfc923fb90c4ecf4dededfbae0a5978ff5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2202022130.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-sRdQs87YdIDiHAaYNHQ8iYDgKZjdCyhWjwYv3DcnOe/zwHFnTYcylDc0neBtPA0gdJNBdaxL27qAjDlvNNNnqw==","shasum":"487e5ae3c4207f79f3406003536c046363fe8e0c","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2202022130.0.tgz","fileCount":29,"unpackedSize":984432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/AkKCRA9TVsSAnZWagAAIqwQAJYDN/9unbS4lbkARsro\nKu7DsV/KMVIclH3PR2Ijs3xhes/zYYNjCovFJOfSuDOed5ZiNxKO31QO1jDD\nGCKgWNVZGdiwViPmYJHT0z5iB0PfSii++PgYfhHe2lbONuChlYZG4kEb7vnW\nfS7UI1/BDd+HQQ/mUUQtAEqZQezXX0PwLh2sCIv5sZ+SWf1/5L1lgFk8zMGi\n927L1OwtiQQkl13s8TRbZM47Y8FvVwcPZshpXqU9AJdlEIwzgP9B+VoNYhX8\nZeR6grX56RoxzNsdAsWymO6mJ6zSTxZIaTUm1b42mP88+GPjMPFvVR4UltVR\njAgW20mo6YHM+xaONXXMNU2Kmwgak+G076BUbXVv62lrfQN5cRlZ0cKy3t2q\nw+cVVMJUki62fnzxFGKHlXdU/Y1Tdi/KrdjCc352Sftqnzb0gGA2jau8Il7t\nRXSCKe8Z3gCMCq1/bNzkuUoMblDZTc/7x9mJChf+NMQL5eZaE1b+bbJJt1i0\ngiL+mEMEMv+JozFYUVOe+txdEqyTfzjUFd1J3VcFSOwEtIIytW6hyYle1iiL\nmtC4EOUfHoGOlw2gw7DFpm8Ja7forBsUMivl76wdwf0jQgCADVVwMNGOGi/C\nJKqcIPL8NOQvRE/r5j5i/oMqnnEmIXT3EZI16PGt7aZ+YzLHOcteec5ZzGoe\nybch\r\n=VW4W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbydvFd4Copl8eafnrU7hWYZwPP59vvRj+aYuAXGyR0QIgIkuw5tlFLF0wdgRBf9kfWMJB+szs/VmLYXDx7UFT8zw="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2202022130.0_1643907338482_0.503083103321653"},"_hasShrinkwrap":false},"1.2202031816.0":{"name":"@bentoproject/accordion","version":"1.2202031816.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an amp-accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"b29dbd478c93a5298a18f8df14e6c1f5184879e3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2202031816.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-5ggjmV9A0Ix5pd8mUuXQcXp6NJ01Zdsi6AdTjBRBEs3vfDzIDKAouJM8t2fUHIwVJkg77OBHYvx/h43zyv1E/Q==","shasum":"3711ce2fa88867951b000c0a049d6a07bd14ed8a","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2202031816.0.tgz","fileCount":29,"unpackedSize":984432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/UplCRA9TVsSAnZWagAA5fEP+QCwmGLcSU3DKwMTM3KH\naN9MBFcvohlnoB8qFe4d8pwUVsFYpYkc2hzNNNzpLA3QT53Vl6dQkN968t2e\n61VrIKpq0k6kpTLovxJ3p/b2yNZ5XPdTH511bXfhHNDNhJlFJU75aeeuvo//\n5CCK//NB1I+/GMUDvEWrv3Qc5lEbOb4/k/V9CEZxESaC/pR69THGelthFEp6\nmzFyENiXOWB3dB+HZyqouVOZi74VqChmdVZCthCOchSyqCCSTpcHzCFS/bMs\nvBFbneTK/vj8Ap/kRQ9Q6HUGE9wtjdGJxV6L4ZfBiDxHccyI6Rlb4VGfGJRR\n0NhRe/pIKWrKlu+Ib1swOoZaGQ2YxX+oZDTVvGTt70w4g+SiuPPhmce/qpsf\nNC70U3LMI4j53FxnxS/aTPPtKw0J2ldTgZxl8cC4RvqFmwaHP6SKq8Lmjv0Z\nKwmK/md8yRaQRB8bWYtBzE6UEBFRzMhnilQy3FUydMdvIBMD6wdlVe2Byr1C\nBpAdZvQocoWXdJirQC93ReSn95W8BPoJqw7TnphejVmFxrtQ+Dk7C0mrFGDv\npOWf47REZAOay1RH2MwhsiJ5xtcgW2Mmdh0we5IUfzJ8+YxcuZ2axbzhEgLI\nax/ooPCTpxLp183usDCRAiNoHyFk9Z96D1VZe2owveZK8dr5/XkzqVDCO0Uo\nwfeu\r\n=el0t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqGXUfx+T3TkjF1rxXRU/HzdsZo2ZZuVQ+cCgPBq1zVAiEA68UiEBmOJDStUnHQ7f5gKgN4eaCPxVfe6oyvXnB/b4M="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2202031816.0_1643989605151_0.18507051574975986"},"_hasShrinkwrap":false},"1.2203041950.0":{"name":"@bentoproject/accordion","version":"1.2203041950.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203041950.0"},"gitHead":"419d49d2920fbdf4bf88e8efc3421f7c37ec209b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2203041950.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-k+sL8QHjuEMXzcxTvFXLF7vhLm5GBorsC/NAzgVM0lCGuesALxNGtQghAntglU8hyOnwEwKbAgoNLmTVyulQjw==","shasum":"75a49b7e6592dc2d53ec675355538d3da7e689b5","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2203041950.0.tgz","fileCount":30,"unpackedSize":743363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNyKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Cg//Xh2NuZZRGePsQUGfgFBhX0vVRGxNaNND5mzgMj8HmJTVksaB\r\nOgul4YhwpsZMWHTkWz5MRrFQUvJPMhY00XLonC34QPNA7KAP1YdvZCDuUBN2\r\nFKMheDLpMq2clBGKYc11rzU4jacNeL7X58iCwzyT7iZ7/a3H8y9UjwH1lRHo\r\nmabUBGo+R0Gs3HxFmTfNVaaIZFD4tuz5iJpyntf2qoPRu0vTyPh/kIlbj7Ef\r\nIKMu03ThZawxbf/NtJcySh7AZ5Lxw2Qx6PZ7TpF0ioGW7hwDce80B27L/LxY\r\ns75ioxedufB7Zrd/bELCJmTnghhiJSujlP/kpFNckS0/rSjxjYocttNs3yIk\r\nn4YoKZMMvwCLgi6lvzhWNsE2sAPS0tUIioJA5z5OY0asF5HtP+QW5g8M/QHK\r\nQ0sTQh0S5D+zICx+kM9PZifKZohVpEhYMwMOzpXYZxiisa8tKcsQS1JrQws3\r\ni4abpLnFITlG0AF0MMEmMtyZJIKRQVabojIewcys743udN0uF2Q+MqJ55PSQ\r\n5tcFftQDikHrtl0P8HXDrDHbFiFp2Igw7lcPSEbvyxlJUEUtY5Ptv4SVfJ4N\r\nb00MAUZxl+Cp6HeploQGuutwbISOfwq6JHR4mJf2TIgoipoBh7IoBzgM4Oa4\r\nYi/i8U3fBMsmhb8P3wk8YfI2PDraCrZfPYQ=\r\n=LYYr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFtEvJ7wIqMfmd/qo9GYyynPVNBNUS8v2/PkbeGAYYrQAiEAv2pzf34t5XLLxKYy0tT7buY4knP6oyMmWzs7UkYTvrs="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2203041950.0_1647369354100_0.2841881516390683"},"_hasShrinkwrap":false},"1.2203151539.0":{"name":"@bentoproject/accordion","version":"1.2203151539.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203151539.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"fc739c0d339dbae236fa53a87188f5f7ca58f25c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2203151539.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-UhuN06OLDB4bARjxMxn8z9sJzsgyqNiExO13fKZMDrARm26mw3XuE4W/dvbjILj4CsveiomKIAy0oWcCMfOJuQ==","shasum":"d0976513d7d7a6516face19fb49644ae20b5aaa5","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2203151539.0.tgz","fileCount":30,"unpackedSize":743363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZ4gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfhA/+JndIejmPLAoQfyt5CgQgLYdrjOOczFzSh4uerwK1A5YkI3L1\r\nQg/k2FgfAvyrCEAWtqXwWMzaFnHV8PTf19aQiUEcTq7+cidBXSEtlySoVrET\r\njDlrf4uWQBPQmcQQSOfhtQ29clNuCFD8VHfpPr0GoFr4/3juGyZ+zig/lymn\r\neELJYCxtI32VigxRRpdU7dql4pWqtojkHL7jrV1pFrf2f5pkQaPxi9Cec5qV\r\nAqc9aBBOkAaEi/tq6fHhRJC9jCfdyYDEKnWOdLy50XEofbHpc/jyJpB0zHFz\r\nnngykrY3/bUvGkUGTYDjKDl/vH2JF4aLR0MBqyIbkKJ4TteTxf8oSDShVrMb\r\nyY52baIoxEOXV59ZMu9dhelaxpvL9NHy2yQPLX6WGDBiQEq7imZVZx2HD1xj\r\n8zGNJAc7NcvX85up/Wknj3XoOgmcYmzdMwNfRwCAmc2Rot8O8bODeDhXd/dD\r\nEDvoSXwoXUeMvUtOmJ9usrHIxoIeJbryKUhtLvtKVs7zU7FbNf0nyR57BA5x\r\n8WM/VNcVD0HmPm9Zc4MsSb7iyr10IuuoADTPmDcbKCtVNzPp3HZBd2VHzvS8\r\n62X+qIj/pZLQSu3stcell3ft1h6H+1M0arJOFGj42+AAkfeV8L1XHTS76iQB\r\nPyGI2sH6kuoXa+HCJoZquuNzaV25xnqYvv4=\r\n=PCzn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5dKyogjJbyUbe4uNuk7/xJZPr5NZw62K61S+BAMuMdAIhALeaOqaI+BBAX+qTwGk3QbLHOXqdPL5w7C+6Ic9bGVzJ"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2203151539.0_1647418911998_0.9340629217418268"},"_hasShrinkwrap":false},"1.2203172113.0":{"name":"@bentoproject/accordion","version":"1.2203172113.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203172113.0"},"gitHead":"96b2159ef70d24edf6c33303cb76a623a4669cfb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2203172113.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-oLP1kfHWj/8F7fJO4I7Z6LoB/QPccFqtgwBR8+/cwdLZpR/EWv7dWyLMja0nvk5G7+9w5b2XEtchdFRG5tZQEA==","shasum":"48ff0d39d8d7e4de082d44c678ffe18bcf524918","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2203172113.0.tgz","fileCount":30,"unpackedSize":743363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNEGDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqskw//V81PMg+MlTpz0TPjmSnnx0tTuZaf9v308WsrAajn/fJ16HAk\r\noQkMP9tjqkQad7KVf/q0xmW4FPQ2QRO0vJa8SYAEPLSkySzGuoZenvVU7AnF\r\nREIeoZWSZ5kG3sxX5bpX6Go38HFRrYdTJx6MSrFid7+AeDtHJEaQebByi2EE\r\nnjO1JDEjUCKNWvoJh7X3qQY+nb4CKnQvclLOFaYQlfhwVMUbMXPN9s2kYii2\r\n4lrxFSkaLeibPZ43dph9cSOR/YSk47f9kE+2uddZ7WmKekGzd7/hHfR2aGoW\r\nY1wRdYEb54xHJo34O+WPcsDLkOgVZbKWiNCjwUslsZBz/WNodiAeIegRbl3X\r\nPgwNpVHye8J27z+bcVkDGlkvA7OLTpfbUscW3+wXQUt81gTYsztiql8rwjZ8\r\nlYrvRN29Re7yVkYuhwaqDTCnqVAnBk0CH4U8uMLHTylrx5jDTgQpd1GHKs4l\r\nuVYeDnTW/Rc7Y3S/bWSSxv08fomWdPJros3lOXHHm1k0snmhUp2TAkDRkFMI\r\nK6P+y4NT9JXTEypSpOcY/GTL2xqAOqHR6ENSvPcwaJcAB9Tb1No0TtycBmG4\r\n3hIz6nyycgtYWizHwu9cCMnRQrZ1eEwgI7lfDul62UsgkeMPmd5jQ13BeC8U\r\nAlZ8VLdmRsnaeg1pk35TCidy0m1+gqaQCWY=\r\n=6RuC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBFq9YRPRD1A162ytSwOOIg3oHz/gpJmX754utkhjeipAiEA+Pt6a07WDXwwTRNZns8iWAlguNj6Sn92ikHc+ubLAyk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2203172113.0_1647591811209_0.8349037075333618"},"_hasShrinkwrap":false},"1.2203221937.0":{"name":"@bentoproject/accordion","version":"1.2203221937.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203221937.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"11fb2607ccf78c526a38e31bc141dbd3ac75d326","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2203221937.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-RiDO5A15sr7YYiS366ESsmx7eDEd1V0dLqfmFBioctWTB52c6LMZvCge8SEw3gTTLgKhhuWQkV86IRXkgQURyg==","shasum":"a3ad19af2a99e1db7c66d95ab90e56fddd9be13e","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2203221937.0.tgz","fileCount":30,"unpackedSize":743363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOtmFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZIBAAjDlMK3aPwDTlgL7btwXccIGtwgz+YgBMcgQyMBzXwuWvQTI2\r\nvHv5z209d1AIFbBI2t9rJ+GVstsMgJUKJh6oqaajJccK6RzJngMyXbGkqxYb\r\nZMFdI/QR/2ngVAlrxAN1q1J3FKlG6yNqtYbhmYkPFUGVjzcV16zK9yIQ3J3b\r\nmp+IChH38xEAN7OK7aeohKOhZEZrZvwx+JLQBMJaLRIuPiJ5vgu0eTj26sat\r\nYshGnIPSSb6VUHLw+L2WaW7mgOQ3DGwN5Y2eoKq4jIXtSVOkXgzrjNWYq5kk\r\nyrO0QJ2kTq3CvKnQt6saq3oH1aRT+36VH9X3uD9E0oLl4fz5b98NN21nt/u7\r\n9NqXU6SQFOvOLFgJU4TmeLPkAOJD5TVpjrG/KVE7EOnF6sR8JmtTYlvqrs2p\r\nSp6x3U6+hb+WFqKreAhQEth58NHxUi9s7P5EW2O+3nMoKlT9rqR46zu3aGlD\r\nL7Zd23cJVuDpbHzfP6OQikLeTAuvIwQdnHo6maERnmCgbjFBBSHycwaOMS5m\r\nsekbr7wyL2zMwTvF2dW8lbfyS+P64Z9StycdqicT8F7jXc2SC6esetnyqCFy\r\n/fT7ly1TdOKinNVgxoadwTNBuOqdOJmCCb6ahSVQvJEiQsNnJTqLV9KjU01n\r\nx3gY2/JXVkhjOzFSZX5UCKzoi7uuBp7Lzuo=\r\n=vC9s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlzNWf4e/hG9tlwuLBQTUdHdCQ8qac9NSP/w9MLNAi6wIgc8u9Jw+ZMivhQMHddryvriUMRknvjJinAVQCEgCIe18="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2203221937.0_1648023941456_0.12941076944536256"},"_hasShrinkwrap":false},"1.2203231914.0":{"name":"@bentoproject/accordion","version":"1.2203231914.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203231914.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2203231914.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-ual6aOfkTmv8iw2fKz3F6PKmfmu0+O5ly6HeuC/kXXNYX5FIbZsvdnpGs4ndhjeuvmARtYZvDg6unxDTY+X5tw==","shasum":"b956cded33d87da334690a3f4ae206af3eb4c4ff","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2203231914.0.tgz","fileCount":30,"unpackedSize":743480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCp3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowrA//e46cRIQMRVDmJLLeRN1ZqyXQTgWsqs6I95IRaleRbA1R0scT\r\nJ3JCBc+RN6z4NuLXQcCLzWlf1rEtzxE8OS9m8B7eUSZoI+4XWfcrravg6aff\r\nlQcEyjRVVUVvVaoqMgcziVY/jWL1UmJhzwe6M40izGPkhiUnNar++bhetImJ\r\n3dIEI92PKjZQj+tO9jXiZ1SAQKHpFH8gbcli5npl0toZIPQ+b/MZs5g3TL1J\r\niHBxdnYcVOktyXoTSGKS4KIrZlxXBDz8EmppESYHuvmosdIa2mX3TUozn6MM\r\nrOFEP3g92JBHmSnOmcxE2ORY1BQhBO1TXGPvkLlxUSDBM4V4+rpjaIuKU7T7\r\nvGkUeXBQDcqGo1m5tpDu4DneRZtfIMKupXeQkcLhzTl2LUE87JVgzba7mh3n\r\nXUJO8P8yEFyNAe7NqPJ9uGRSqypG/7eyMuuJuBw3Tq5JhvV2OYWhMZY89/o8\r\nQymEiSMyNfgRJL01cIvqtGhOntP6r+DF5Jmu4T/09thuvhGd5NNpyDEnEnZ1\r\nu+KHHqMwzeCNGiNz4Ad6Pf87NBkGVnt2XrBPkcYFxg7IEux4mEqWX5f0MgA/\r\nEvbRk8XEPi7apbQmvCT/ZLzc6LmWbseY1n6hUb9wK2W4A9EYFScxRrcB3fik\r\nsqnzxb1bMQSBtTaHLgmbpSRbFTAcqI+fiOw=\r\n=As5w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVgky/JKyHijs/98Hztg61PmD7rSkc30ZW9hivo5SWDAiEArHT37fYPQEw2kGBiLS6ndqhSPeIVLvHx6mLlrtLw5z4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2203231914.0_1648110199649_0.8372809227149547"},"_hasShrinkwrap":false},"1.2203101844.0":{"name":"@bentoproject/accordion","version":"1.2203101844.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203101844.0"},"gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2203101844.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-UubaWU7EV5xGoONNP0urrOeQstV5/hndkM4TlxE81j+plYRzoWTatWOw2PB9NXfGT9GvJjYveevWx8tN0EZRSA==","shasum":"142e2e5923c7b23228d5629dbc8024b8089251ab","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2203101844.0.tgz","fileCount":30,"unpackedSize":743480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNAMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXjQ/9ExUfu6fBrVH5eCZc1vZFaJtanv6FvmRutXF2gA4do6ImqWu7\r\nVbn7/S1S9qRx25CkZZCZKeZDIpWKReXOsNul2mLS9wIDJqKuCB3kLocAjvx7\r\nw8f4Xv7rI9p5wz99mMWKLiBDM0gHCAWoA9+/NLCenmyBLFpoX4pfbXrtFC0a\r\nXd+6QXXiTdgvclh4kC1jtg+rYKqQXaR+k92riKOdZrtgAluv/ybiKMjz0XEM\r\n3wazh6iFKt5OhK+uQTsDKuznlX0Wu6A7Y4ZEFKpwdSRVV9T2hRQOBD7b5k9S\r\nmqrjKcJlFIOS8rilUE3KsdJcVGvnicXJ7W0Bl/iLGZWfsHRp+IzB/3Aopx2q\r\ndWWrEivAmzT5DE11q+qARjeZfKYI97DyLFetIpf88CLk1dtcHUA8AKh6VOvM\r\n4rnWJJNsIASIUxPSly0dgl0Wwbt4JTZJjFjpXKGv2WcCLe1bAN+NmNNgNT8L\r\nWQKvJTo2taAsDar+HUeaf+/REmqkb/alXhSuH/DFagefWdfPwFg+ghvdQ6Ku\r\njsrcaUzQ8QoYtm8VI4tWA8/m47pvUMP/YQ+Y+ahkLs+rZPySJKr2pij+XG+b\r\nCJ+zA3zci0t1PmWDprr7IrNT1ub8GitkPc77hjQX5iwF/Pm6n2aMxiBnksrz\r\n6EZBoBhXWxQ9wixtuJPQLW8AY4tRevhvv8w=\r\n=xHUN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEd9II1JrmQHLqjTsDNWmJHyDQZ/vGySjR1KvzsE21E4AiEAo28pVvmN6hQENNXN8aQVJ7pdtw1h4QpmgSYfZN9I/vI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2203101844.0_1648152587850_0.8104971721780114"},"_hasShrinkwrap":false},"1.2203281422.0":{"name":"@bentoproject/accordion","version":"1.2203281422.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203281422.0"},"gitHead":"f74833d1e2b0d9176900cb183c4edacc4ae53986","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2203281422.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-xoJsnL7/3nk4tPTvr37eTKrmFmysVUlirGewYjgPxwLt2ENYfJGXoMKB0MIudR9t6U6Y9DhD0SU0GuhOE/AUvg==","shasum":"bd20a50b4f3f98ccb8021db4098e37201e2aeae8","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2203281422.0.tgz","fileCount":30,"unpackedSize":743480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsMUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq74Q//ef0XaHJCzp3pVi81prQdxDFXuAq2OJDCm1JMw7jyO8tgZsj+\r\ne40w6+K2Ag+KKUvlAZTXyGD0TtEWPJzr2ITV3vW6OgFqmGwoT9HHRje5wY6O\r\ndUFz5IlRJptj+yEdGZZmMKHKgAzJGy+AQ7X4VAjRRlav0oblQFM2GxGlL1Hi\r\nCLmbMWoolV6ppkzBypUyIjHBZmcPIhu4gopviU3lRlLr85UbXgz72e4V0zW5\r\nTlhtfI5xRb5Ud1qADpbs3mB0wTf2DfPSE8gxaHTKJ1BtDkx+dvP/7yFV5WfQ\r\nMeJMWqQQlCDNx3DJDnVLfpgxBqm2zlLb4u+Z2QA2jyH2vUER2OAvvzkyb18K\r\nusWCpwfalPFGsNQtkuRGMEgP0IgFzrkxrA6z+oMcz54igS5iOlCbGMf+yPGG\r\nrvMsmWOMDHp0+Nwiqyp5l7sBLUMHSptZKVcTeoT4kpLv7k1ADSDnWuERBuIB\r\nahrpsEKmr34WN520yByg7u+COC21+rPsKk5sXqniFTAeRumgxSBk3N3JP2We\r\ndvyn0OuPnB+febTZJGlIYwf8+umKNqVmkR/+3Ai/Su+tG0kJ4E47ohCXcVMu\r\nJR4WnC85iO9N61v5t90ntfUJqDZtpqXWYERT88LmcoGWU70nDGApWSh/SCnV\r\n3Enw8gFcRSDau7mS7rKFTIbgstO+HNw2aZo=\r\n=fJUi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3p9Mw3j3iy42PlX/KO+wRKj+LtNg1Aw9+wt0pQcuVWAIhAInfkGixFN2XwytAR1sZCuXs6X7CQ1X6N6+ubjwd9VX+"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2203281422.0_1648542484399_0.9804031850202597"},"_hasShrinkwrap":false},"1.2204121632.0":{"name":"@bentoproject/accordion","version":"1.2204121632.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204121632.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"dce11ee1542a2d10e47b8e9875dae137f4cc1b0a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204121632.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-XNHBjj6/jaEcYHmFCvec+8nSZD7QGXFkAP8IxiPFExpjUolvDkq4Pu4N4kVvSAo1D8fVs7O5fs/w2OsOWKqyXw==","shasum":"6be8f5905c991b85fa110a56949cf25111fa419c","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204121632.0.tgz","fileCount":30,"unpackedSize":743842,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC30R8xxXWeqRiBqHzvE077znMex2jonZJ3vysanboxTAiEAjirS2ndZgucSzVp4bzl678jZC47aFy6PglZy33Df2tQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVcGgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSOw//VsERXWuqlK2dmxeKzurW0kAekR2qRl+8oxvHt6ZOam2Emvcb\r\notysvoT/uaKxOlwI6pqVggzc8hyl5EhxQTAMnO10rO1DH2uIpGra/kkLiU86\r\nLZCvyBZfFzhEyQ1qrJAh44npUnE5nkqaH0QwFYmqX2k0GZJvw1ID0KMU7Kh+\r\neSX5jOBTM2Basfxlvpe6mEcQe8OKt/1hw5y45UEc2+x6BVh+I7j/ATjVH11q\r\nSBUg7eYEdp2h8VVLpcEnVIVnvJBOcMG2GoIA1rON6oUDMGzqRZEI7N2ibMB5\r\n/Zl6VNVQ2pMBsIT3cS1LP5svLI+xMx66jzzRDi3N2m9tClIDN0axuPZW8d4R\r\nJd1bBJZlPG3o2RJHdeRVtfwX1ylkF+lnIGgWjv249dpAyMTCnmK0LrDvLBch\r\nRMgjE2zTNmT1Hb9pXl2McTHYwxFH87jAQBbAeLMMEULqUH6i/pBFEW4s3GPJ\r\n+DbFo8ESToKyFhdiYvX0WjaYJpnNTy1dgPITUxF6KYRwEJxcooCaoCvMovfW\r\n3foE6UHWsJXxwLGP9wrqf7M4FJcbsRWmnWDVrSy6G7mFF2vff11GmyPozHtt\r\nHc5jDRnInoOrdpaJc9ktmJhSeZ7LNFCvC4KmMGDYLZ+xI6D6VR+JBcT5+gmd\r\nSMGnah6N8NU0u7WKDAxrvWcJb9uka3cBbBU=\r\n=NI38\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204121632.0_1649787296164_0.7382275012168344"},"_hasShrinkwrap":false},"1.2204122000.0":{"name":"@bentoproject/accordion","version":"1.2204122000.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204122000.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"9d10200b5a9784c35ca9fa16b1a4b3078aab3180","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204122000.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-T3CWu8t8ObF89GouWQIzOp2vIqVjdwZebBa4KmPZWYS9Wesx4ytVImZtkTNokQBw1cjpaUhlb72ZNv4L8rhWDg==","shasum":"46b665171a926de25b2c3331353f0741f878aa76","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204122000.0.tgz","fileCount":30,"unpackedSize":743650,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhPTGaQg0AaCzMuNHZ10zH0VhXJryKu//IHXSJYg1tDAiEA1fBwHhsj8Z+feYCMaNvEMMJDO3UgQoDaUSt26YXrzGA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVopLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLWw/+N+lfXrr68TOJv4f9TCjEw1307Cw+FlWnwTfLxvwpLdVS/8kE\r\noZPV5UFZsJlE5/ae+z4e7wtNLsURrYbeZ8lY0rDM+chwqSBBVGdVvehZXjSl\r\ncEqLgudmkQLrxuZjjdYWcQji6Cw3kWv/DWOXwReiEIMXNBkzGKGOr8ZHFl+U\r\ncdNVxLVXa2RMafx6NTxdrZSYh2WsUP4oCLo50QiSzksNiqtEy2for75yeQsB\r\nvaoOCTJMYqSemqxKWejrWzYvs1wvY4HzBumwBA05TF1Ewx3j2hMUavwK0Boz\r\nleAj6dh+wDo8n7doSK5yL821DUQ2Jr+3PAL3l0WBK5SUG6zUQHFA5OAyLImu\r\nuS359A1jbgsvdSeQj51IdpowolQNqSdQzFPJt0G8JzesNtNtnzNStt6IJtWT\r\naSRyUn+Hos76VLMMhwY/uv3jn/qZDft0wXT8b4uWbNj63/8AUD8DqOwhxH8/\r\n5vjki0qcztX9iOqXdPzc0cGXec9ry7Zwy4n5k2Px3j6kSmFlKk/vet0PgEhJ\r\ntc8fNUKU8TGmsazz220T/gpJRAfNeqAbo0/umY+yum3OLzPYfiIlRrekf3CF\r\nLc0vbtW5xTOSkhCOITbuRsJJVrc2m3jiCccdHVVWWrJHwUIpzHTJvsteJ2X6\r\nrLx0GhXUcNr+GhLSpW2URXRinjY4ArTE6HE=\r\n=hkEQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204122000.0_1649838667514_0.7182028164456034"},"_hasShrinkwrap":false},"1.2204132005.0":{"name":"@bentoproject/accordion","version":"1.2204132005.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204132005.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"26ab90e1d3f7c29ac76e3fe33cdbeec9e828eff1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204132005.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-OLVkdnIj9QUW/bAmnpA4M0tLasp6Y7+mIESz6oakpNLIiP9YdYtguXAGkbe4qC5BDI46v6SRTSFX00vu4k6l2Q==","shasum":"8a759869f964766259bd8a6d183436ab33705fee","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204132005.0.tgz","fileCount":30,"unpackedSize":743650,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNHp6iPzc6An4GDpUyfALPBnSGp/1FvwBvbEb0W0mBHwIhAJTtOGqC1BV9OQnikYDeYIhMlW5pdQvPRJUu9TcqOUbX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV9w2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocohAAjTTid8hUD0MxgLESJiCG+TOgkyiSMlomw9kZtGjGwmHtFGcT\r\n3Lx+vyr1N/yvIvMbLaAkZu8vYolwofWGSZKc81NtTrlqpNudH1Z1wX6vlIsW\r\n0rBRJoH9/2Voih4x52TW9EaN0HRA6EO2VzM6PAwvouZ267OkpHGTC0G8crOe\r\nPo2T7D2Po4mIsmcUikb4aeAYzmUmwh8x+bm+wxGLY7l9JxAD8j4IHy+agmFj\r\nVqtCpHi0bLpkSV2uq2sIHmekPp9plFJjoueVG2KQQNwopWJQvts8T933T4Sc\r\nPfOjOhmKgJuQUcCTiaZm5itpsJeEuF3oay807rk+L6CX7b8huYSy5xChEaMV\r\nWQZ7ppGirVB4yfcX5/+JlYS6mKBfiH3REh5PsHkUHfla+eNL6kYx0mVG34JQ\r\n68xk0RlGykjlEo8Tlk+BRrcNiaM6GTqPKu/iM0SrvuMYh2VZ1N0/5yZo3sIF\r\nDUwTWcJTs/Imk5bmejYNzm7ewyN6eif93jqJv3AtRh1jmh98aS5lyhLRB8+O\r\n1oTm3JpaJzfwRNQ7WNNbPhwNMRVapfWRIKwoff2u/XvhhIP+MUQlCWdlYqcP\r\nKCZc/pDpPjc5+d1+v8cuDjdYqIum5eY5lONlkWK+2Kx9XQQVMgLsgg4ucsbo\r\nBOFck9+tzyAjg/skmSR2j5NRFQ4oQ+IMtFc=\r\n=JypN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204132005.0_1649925174154_0.548821198731468"},"_hasShrinkwrap":false},"1.2204142048.0":{"name":"@bentoproject/accordion","version":"1.2204142048.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204142048.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"32d29a09afd66bca55e024a4f21b1cdf6690cfdb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204142048.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-EOWHNC5XJW90A0coewqNB8eVNC1/67AtCG0PfvcSR7jblCF79xz1ydNKR67PvFO4gKnF+aZN5DdXuemTiUORCg==","shasum":"efb760928aa74610fd001473be98a0fe7bcee715","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204142048.0.tgz","fileCount":30,"unpackedSize":743650,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDA5hlfvEjTC1kez0yXUhB42h6gwrjg4Sd9k5RPhS2SQIhAJHu/HzxCxy4iIunRsr0vqiadEbCtYXujrkDzMcH/NBl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWSwvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7HhAAjnZfJUR4T7dJl9K51tPoCF1tDsBjBbyRBJgkejxAkzOiSM3K\r\nJnqJee2wCkZAPBPHt87hllrPJPMqZBCu8HSD0HoJqtfYuD0WVDrvKCXZkPeU\r\n+iNZyd/5plbdJjTn3Ey8xOsRZ9qzn1D3Bagk9gBhtC2SYwLjpfEMkzCBglv6\r\nxTxggqFji+DBO/6gNE4TOk5d6vgqs8NwVgMX8x7/+kVFOESsEdLA0hREjZw+\r\n4N/fvi7Mm+bEoW1ejnGMctY4HRf2raSjLjmLs3/L7S9PGv5CFQuTl6g7adAi\r\nxQsOKR5PAxSnJtim3Z9nsg45TOb0RzdzAPvK7wxyGpNW711Oz9/i9TeX8r1k\r\n8kB0sGF67mTygQS5i64/aWAhfM4wGZC2rK45nkWqFlx8k3l9Igd8/6Qd6zFz\r\n6sgp71yaSFqMgj0+JpX0GdD2qWwkKF+f17Dsk6+Y4Dn2NLD5Zw6HCrhOUf+y\r\nsGW3+58gyZIzpExR9cSMF5eBEgzVSGQFTGUymxE0wnhXJibmLZ0eS5Y2NS4n\r\nL41xwdLLG3IbKhEqMTG0yCoiAZsDlA0SgZ8qeOFopFKI+Euvt1q2hmhwJF8M\r\nu+e4FMZM8vWcsEJWJxcqmCqgjFNbIFNmD+5l39Y9VjEvMOj4/nJpHoOXXuEq\r\nhl6pqOoQjWhsqgoYHMYVO94is8rup7Dh7BY=\r\n=/dhj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204142048.0_1650011183413_0.3889931029062672"},"_hasShrinkwrap":false},"1.2204160405.0":{"name":"@bentoproject/accordion","version":"1.2204160405.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204160405.0"},"gitHead":"a26d51722a65f29aa7f77872b7906f6e7ed62e9a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204160405.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-QCODDXBQuYcKG9HMSooerMJhu8Y+6/mSEwgvEwyogzqqyGJ1wvbL7tpT+rKoFqhwXxpYGT9EZfZaPwmP6/jkEA==","shasum":"ca62e18be67574f4993299bc0d31cbde625926f2","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204160405.0.tgz","fileCount":30,"unpackedSize":743650,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJQBfD4YgLHCRIFa3ssRQ7GfOU7IpXsycOO2PNLRJhJAIhAKPwLn0twRDlkdieTX428X+SJOnV9i45pGvvWRRzhy/H"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWn0IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/GxAAhYmbyLpnxha7qKo8cMVet+XfsczmLN/OJKaDgy7fD9crH0pX\r\nDHW3B4OUTM6svt5Ck6eYwKZTUFWc3pF+lH7XY905ZJaABluHEFs9f2oCdgi+\r\naz5j0JaVZi/fwhO3WZxJNnYIYwpNzANhr5I4IbtwZvj1lkBtYZaPuw07jF8d\r\nzs5WyEjjBpuhzUf9FYHSjvLhsdQ9Cx6vC85aDREtp02m1r5v+tdF44FEr06n\r\nRZAcMJuWDq1+YPNsJLpatNzhA0JdKlNAb8tDLFU09n2SQ7LVkBjq22tUYrs2\r\n8sPcG/7uwFNDERczswuyuFExW95AgEai4nhOLQZdyd44BjAbHtioU12Bj04i\r\nvQ5VajBsmCcZSTf0gwtiV460SaRHCvFq2Ge7PxLN3nyXyl9JTzgnjzhrSaac\r\n4DKeJXcmnqBhfE8qodLWEQUamvjYcR6f0uv1b+gSGgnhm5TaRbJtuAxhuZ7N\r\nfdyV2S04IvPp2xRjpPO6MZrOSYpv4bhF8bP//fsgJXE9ijicDBED6UAYTdFq\r\nNLtDCfHnvb2e+P2Ccd9mv2qshtzkEy9fuKcYCKvotoIl8vdVwCRRw88fyNqi\r\nfDulBBlfZY+uBRP2Y5zjKGEPtf9z13FwWolliXOtB+bODLgCd8ramAV5YYPb\r\nXlvyfjJI/5moAUZsI8iGjtyGrxGNnfK+ghg=\r\n=o+NX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204160405.0_1650097416473_0.7160786643450956"},"_hasShrinkwrap":false},"1.2204182206.0":{"name":"@bentoproject/accordion","version":"1.2204182206.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204182206.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"83e7c80d7406923369ada8c1a7a5dc660ebdcad6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204182206.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-oJ+lwnIChb45eNdS3FnreK4q8hVzjmobqJps54aogZUa/zGKupUze8vyl6vocSYu7TAdFTAzPUclGws/er42Eg==","shasum":"cf68f3b8349303e0c2ad46da6e734588928e1630","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204182206.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGaGF54jrp2Sm0tIWSqXSibk5L2I5sFfUlNU7Jumt2P4AiEArjNz8spClFFMa7RWjb/Rg5OrByjP60bRCaJ7q6XAd8w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXnM0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAQg//XErpoYuzwSWrWvJG88MZIiGLzvHj48LkzOL7nYiHQ6vNCNxL\r\ne25lkutB8dvQb5JlQ/DuXhcHNwAdGfqAGLT5l5l6XbYB8iyd3rMmISAzE132\r\nT7C5PasjLkioOl5BDfOAyz3nGiZvAaGgs25UbHKQvXLmk601B+hPCPOzOVDV\r\nWo9dcoX5OzZsrcW0kPhTP/k4wMpXfnMYH0zdJGeNpwMT9scI6kX8iWKEV/w6\r\nyxbay5m4Dp4lF8vidWhNYGAVPArAdCLLHiiWElkEukLFXKZPCufbthreWNH4\r\nWWucXHD9jHx7oYszKCJD8DD/T/+FnMyk1AIaBoIhY/yh9E6MQureK2vS1I6k\r\noQlCqFfxNZQbOHmaeUKkuOB3uzLtcIoEyG5ufY6RQK+o3mXXYPjzbAF9RBpf\r\nadB9aYderaRX8nSlT92jsKKuvgzkGUuOWN6q9npYGrBdCl+uiXquwY69ptpF\r\nTrT+keFdSOx+n9IzO7wZWtz7yrd9tZeDl1Pc83kRPPwYBs/jgnY3eYPdcPPk\r\nJTFXIhKZH43B7B8VKqXJ+u7Crw+fOuHzExL9RgBz1Zy1ARUnjCNXB1ZDb3hL\r\neGEf3qU53hI5HxqkR7f5hp/l3XpzelcmgquNyC0AtdIBBducKGpbIlzjx0ZX\r\nzZiyHIFiIUA0El2XLZXjIabDTX2pYCgNjIs=\r\n=vUYr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204182206.0_1650357044195_0.4824426171081846"},"_hasShrinkwrap":false},"1.2204191429.0":{"name":"@bentoproject/accordion","version":"1.2204191429.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204191429.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"2ef2d96efb4624b0ef0313b60134c9e35a4e8429","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204191429.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-8lsTa7NQZSdqZpT8KxMZ+LtXJENPcxwBukUSdFx+XBy+drlNddluQkBZh/5TWJjduy5cP3kNs8wMqmbbRBTj4g==","shasum":"96ba2af99bee821f8c034ca7d662f8bf8c9c9a3f","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204191429.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvbxBazjjx3kK5EoqVFcZGQoL/WC1iwQYCC4ut7o+acAiBcqHUArS8Jm5Cm6//8CvBqGGT+5Jyk3LyRIVdIOQs+1Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX8SzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomtA//QM7zyYvR4G8c+zhUkiga49VIbuNXA3TPGPREO6lD1V7+8O4f\r\ndDgXWvdAvwsJvn/iklOo/ll5aGdYhJfidkOqiYnyemz6Gty5nr5U4/PXkSUC\r\nqPsEHU5STaSfdQyQkN+bRW4zxvwdzW3VLAmYmosr+GnyGiDxRn5BQFaJ1RsI\r\nT1Qxja99kbPjubMKz6CLsgxlpbCoIjK3WME8oYXyMC5TpEUEHHvzdY0NPKUP\r\nX2dgec6ZG9cOYS8MXY58uBX5zL93ORfANxGWiTGAvefH+zxoxA/ZfQGCdcgR\r\n7ACqXotEc5P5LRmB8aujmlGSQ1EkWLHUfuLcjY3vk4TJxKb8Z1rq0QoeKVIf\r\nz4FSbmBNXHULs3GcF2pVzDEVMKyaYvSh3DAiRZlGKhP05owxorKitjqDLguF\r\nTHkKPoBvGLNy9poBUdzOzK6OEyijvvEbwnZaBUVes4uDSgnRZbdw7LKXBrfG\r\nXIXAq40MbLUNtczScxEzVbMypr6SU+TKxCxumc4XSshFw0gNFpNgDE5FYrf4\r\nSqQd/Nm9IHfnRusYvIWevBfX6Kzz3OhItDqtx0PFYNZr2yK6j/MeNyF2uCeB\r\nYX0PbZyBOoqAIylF/CMSDYxhzgoMXls+fv6ZnOBfKHdcH28YB8r33MhT7Qhx\r\nq2UluvoFMNdKCTbe0mvu+lyOnm59/VS8pbw=\r\n=cM24\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204191429.0_1650443443051_0.6718577747808772"},"_hasShrinkwrap":false},"1.2204211736.0":{"name":"@bentoproject/accordion","version":"1.2204211736.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204211736.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"01dad70364e4b2b9707441c2c8ec973e1547b195","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204211736.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-Iq+VR6Nup/Qh4clcDGDUXllxQ++YHJYMuB6nlnSn2ey9Zu4OjRSWFX5/ATxgZbBVYK5T5WfZOt1/cUzFlPSgPA==","shasum":"26f3553498c3fd4518557ce5d80b4d65fe4a03d0","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204211736.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBATWUIzqzdqB6eqW3RikpY6f68v/7jx4obPXbn3QdilAiEAg3QO5ZQYxjmKDLQuUX8W5A+q4xZ0SNOyNKu1B/BA+j4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYmZmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAkxAAhkY6Zud5tM9g+KO4NyxaaYvbcyeilzrj1bUy0bUohkpXtE8i\r\nqsKxykOUI7PNGCK/e8cL0CI1/yvmrsCdP00FrUbEv8a24P+RFkJ5BMQY2kK0\r\nd/GbVnyE/9dedmHSLe8c598fC1E8hSCtQkrx05WxWtuT+Ss27PEpaq2z2PPB\r\neqr0KEBVmgx84H0XU/Cg2nss2mv6c4SdHGW8RU4cpodsN559M2GGzSFEIOMZ\r\nvGoHnC8ZVP3vBxDTP2MVtERc4z30vjzE0vSFfikhNgAn3P7vW+DxOFHN+Y/a\r\nvUSl5gzjvtuh5nzC4gsPCRNvD1iEKD4BKReJlFMCyS+7lEC0mo6WejTTMFnf\r\nEXRT9NqvSromcb5xXcs0GNVCTd6DY4o5NPZ6R7L6v7RJwBCNsC7URsdf9bDp\r\nQABAv3Ox62Q0NA+0o3myzJaPzTFxMxSH0MuPO0rweuTVt+4hAuw+IpTOnVFG\r\nWYPRdWx4fLarMHsIdMKi3JD3ay/gVdxsDI3Of04v+vi2gcd6aFjCuN3QyVY2\r\n6LYcy67GjLc0q8W8Rkbq0utfqrJtkD64wmB7wkC6fxyX4EitV6y6uIUz7jyD\r\nffU8ASMn7Z7LWCEWQzDbJRCtpbveaMVvS9myuCqwAZaHvEoHJtwDLUWBrJpB\r\njvk/iKD4rBpsipysRWMQ9HYz+VPHkLB+Ekg=\r\n=ISKA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204211736.0_1650615910338_0.803227841857354"},"_hasShrinkwrap":false},"1.2204221712.0":{"name":"@bentoproject/accordion","version":"1.2204221712.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204221712.0"},"gitHead":"fd84f283465064f90218f67c2964f8c0ecc248fe","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204221712.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-vOngS2e7euLs9KSF3cD9SIY5M5qhWRWR3Typa65u2oZiplXp21DuxzxO6xetCDoihERZiTFZ1V4KNgaSKheAUg==","shasum":"61cb554f845a6cdbfff8e33126bfa9ccfaba619a","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204221712.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/iLXf8/MfRZK49eLBWeYIYMHb87F3mm97oKCORQfvIgIgPxtWWJAKKgmnFv0sVz4eeIvQyGBT12KEdbBXlL3Tlfk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiY7erACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq47xAAivGETXFUC/9TmU9LlKWL1N6HvVT7C/XtEIdLIMY3RnxIPpaa\r\nXnoMoxOQBwJYBflCb9kUanD/rdfqUi24TVcaaW5aleYAPPo9orCsj6nk+XAO\r\niEGR+Y5JcBAfXvIuftKeG/O91LhYPJTI9xMu/NU9Z055yY0UeWGD8zs7ENDI\r\nLq0uVz8mXZIjic4VhkVKM2T+b1tEFvV91z4eM+FlQL9V7voVPkJs/omjwIeS\r\nKWs84PwP/q1CjIplhvq0rh5O8i4sgHp1H41Wx5A1w8RIL8mCWmGPECP5W0dq\r\nPyB2lHa9b7h+6B6m42PpSDGrw70m9Li40Rkw0j5t5mMNH/0hVK6GH7h4BDdh\r\n4Q0ckNgbyeU7WnijbyTXBxRHRwGY3XoeKug5surSG1Jt1uCZU0uwuPN/AwK7\r\nSnZP9TTMT4Zow6CSsNY9CFLQmnhSOFSwhAMtTzKsSUB5usBgymvkMMpBhuj9\r\nC6IYiQKCPFE01T8VDgxGPTRvYabxkg+kh7ek4wvWkOnn3xbWCEIvEHGFD+QG\r\nrY+EaxIG5y7TG8j/HibqI3VYGBSu+Y75OciU66aXB59MmIzGRXveGlICrmqU\r\n/g1n7CoY+BuTLQOq8swUUcwPth5EDFdbVrxp7ifZYrbzKOjU3XOlbWX3XC/Y\r\nkOzyX59m+X8B7pgrCGhKHqyYD/3PEflzdIE=\r\n=wI52\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204221712.0_1650702251250_0.2992374416874841"},"_hasShrinkwrap":false},"1.2204252045.0":{"name":"@bentoproject/accordion","version":"1.2204252045.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204252045.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"9dcb73514b52c635b732b72b56561ac680ea344e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204252045.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-nUqAVrf0trb71ra/GBeg5/F+bd4t0Eq9J60pV13JwufE6JH0WvNh0c7xtf8rEovhpF46q/C80/3iZitMET4lAw==","shasum":"a81737c6b25949d62ddba4fec4aa83b4cb574a91","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204252045.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLs2YK3v9f5bOAqMY/NXJRiZbPXvl+/2e5Bci1NOKevAiEAh3q739ZUXfdQfm2pcWenFr7SJtklAhPxSQi6Z8scr0E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ622ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC4A//SZHsBmdlFJ/TbV9Xenh8O8Zb92IvAwQjexRIIn0WXMatOrzM\r\nKirv1ZeAEvQIZLvyVwxm2hFq7otnMrJ4e2IjqKzdr+kq5AYu0gJHVgH1v9e+\r\nYpXAJmyePk9pz3nqohMIHMI9yJ944/l2688jXnRmI12qlyun2uscqX1EZ5Jn\r\nWIN7mSDXW2T/tNCXWpITom6/UW9PIc/AsWc3f12BYshARtP1a7lHQnA19XrH\r\n5yaP9ptotLCNT1Fz36VPZT5gPr4a0ZOH3CxtHGzrje6p6f9LdIuX/p5NQUcd\r\nxbk0rnMwFZn8KnEuUnvvW8TeCbDJH3WKQwLZ0DK6xGSbD8U7WXT3OCEPEzRP\r\nIdxgMvBFn5yQZ4u6dlZh9dimiOzaQTq9wsztYsX5yZgQ9oLvkxFowr2WYeC+\r\nAq2SosdeVNwNBT6e0FWDh2+fKsBleeoLUhzUS9pyx8KkMAkaD8O1Cr6hISIH\r\n2lw0fwyLo++s1fp9qgqgDOQ0asicZkzoVV1CKqoQkocVtl0m08PtcZ7tYSzu\r\nJcWEEdm7INms8C6cNE0Fiy1PQlxSSh/53McrsLdlUi2tKixtar5QaKjiWj/4\r\nuXlJEv4Uo1sUSMQZLACT995jZ6cmYv2viNN964DPGoZYF6Nb7HEcdIxzHAjZ\r\nxsMsyjeqDSdtEv1H8tWruuLqHPwRa/bi58Q=\r\n=5vhg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204252045.0_1650961845653_0.5193338572713646"},"_hasShrinkwrap":false},"1.2204272205.0":{"name":"@bentoproject/accordion","version":"1.2204272205.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204272205.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"c2397d28837191a7d145806840ca6ca9a73823d4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204272205.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-WDATiBjtSTKEI4pesznpxBvVpUrtWNvBaDWCJUsXGGtwFVhMhyxI7HyaZu1iFUbyR0X8cRWJPsY2mdxYPdVXpw==","shasum":"c231cdfc6639d15ed5369f22b8cf0623c347839a","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204272205.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTDLnzfy0nhi/WBfunxUhHFd2FwxuUqYk/9o8k308kWAiAUXaSvw4Qrp7nSjWmhwyivv5uLRxtF4ib3FuoVUBNlIw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJialFAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1dg/9FMivJm/+S3AKpfH++1A1tOg7eJfxD9CTiqlHnmuIsP6qtAYi\r\ngfwYALV0bCri5xi/d1eLRiqomi6p76TA8HhuNF7vuCdlen5cPPiC++AimG57\r\nS/Eb/tTPDd5J+EkwmsTImUWvU6YCJKgRfQFhVSwIjd842FIBQUZ5mMe0F8aI\r\nRbripIcHl+qLvmXVMbR0j73gme3105jWaF1rVYuUeL9yWHcOfE8KJQJ9bbKx\r\nN7YjB5teSeC/XVs3ThG+n9nmUjpW9LAwziaC8o6Js22AcfOHt4SlqDQxDoaM\r\nv62WHYvkuDXNA7ZlWE4iv7NrVUMDtQfXVGkovCwe5ZjvG3ZscXRWPKZg7KMB\r\nLE5KlkUserreF3RHP0pfwWD9nqDM/gbzI6mztSVocuBFGpY4zGiESi7e0DnW\r\nu+gDHGYeaCMa+U0A9DwzOKMFQgYqHukcSVRsO7aa1IwqeiHnvoUTC8xMwe7M\r\nbsq/9eonDidqQ1DZ8HhXQata9bnM+Bwq2HCp15z10HQf0ombQ5qCONRUkWLY\r\nrVMQN5P662AoFq7Y/RmqT/cWwkQHGYdqxb1lnAEwOIWxZnfyFZ62RBLEUSY7\r\nCiqTgol//Joenujd59p3QJMpn6lB8GfE3RWh3ut+TvD+mC7oVZ/l+HgA6ieM\r\nGTrm9GMHJCd34TMSlV6+3TplXryxQmdUcIE=\r\n=3Qmr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204272205.0_1651134784529_0.7519287235913303"},"_hasShrinkwrap":false},"1.2204281949.0":{"name":"@bentoproject/accordion","version":"1.2204281949.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204281949.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"8bd4749759e81fea16cc216637d7a185eea3402e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204281949.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-gppcfkcpCw5s1eV9hwd2/wAKwG+3rFzYRyNRdlqDJz5JY+YKpdUbzSsZVgymIPjmCZon5Fcl3hvRDL9jlKhWUQ==","shasum":"393be5f5ee370d7c09951ad9732b1c2d9753483e","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204281949.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHjgGAYK8hfJRI+Z1Cgpeha3B5slHbl53fxFR/5VQV9AIhAPO/rES4d3DVvn8mpvyrYP6L5HelFNStw/4hmSfcrAHg"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia6FNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpGhAAjvZnZvw26jJBvKdLschqSf82oFchV3HXw2mjCjai7+KeHZDB\r\nmQJzH2WUCECqO8gZOdMfEcZaT3uOooGO7y8QkZ8hPqIHa2IJxMvLWPs0baCP\r\nYjsglHJRTXwOu0sAJ0oXC7J1yD0dPzZp9NZIsOKUpfJTjlE0RuZcvN/WPtp3\r\n/A75Y/++iiePXpim+dFiQajjKQPokue8f9d8/cIN2YPY1M1k3emM1KvSSLD0\r\nMuMH8beP/r6K6PmSntM4pe4aVKgcgY8euWMM/QBYi+X1zDgezjXNAtEE9DiR\r\nENQ0y/M8mkD+Ku2GWFniLb+F8Zzo4t5oMVS0GBaf5+YpkJppyV7c1hdXCkCa\r\nNW0XztQLC5zv5GF8AcUkuJ+YegAo6lkM3uH3KS3JqTWePw7p52zqT/qdS9ms\r\newvi0nOS24duXjoqUShVOmBU9aZCx3Rv6ip7MlAHm1eRs1OCghPcV/vWnO7M\r\n0zlTO23RakKWKIl4dDG92RjA2euRYgKsRw+NZ4XcRzVQjbXXSmKYS3u/hTN8\r\neI/aX1+eOu7jpL9TTfR8gGp+uSu7+1+GTJPH2lZRZgXx6pXD40k5FDBjmP9U\r\n0nI7TMWdOtLk6tDGsLojw+L0COI6fOEVoyQdQjJFHwOPglmvpI2SvXG3Fprd\r\ndITqwDpWyw3cLS16dnm3t9uR9ttUQAsM6sM=\r\n=f4mh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204281949.0_1651220812930_0.4944338856653909"},"_hasShrinkwrap":false},"1.2204292129.0":{"name":"@bentoproject/accordion","version":"1.2204292129.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204292129.0"},"gitHead":"266c274e2aa669399dede55e9fc55b8917069279","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2204292129.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-55D61O0tEaeIhlhPNKza0wGcIbu085HNRpDtufELkqY2+GtjBhFqQTHxGehuQ/AeBIbABhfrRpUugF/FzPRSeA==","shasum":"03aa128f99d1ca500e1d0996a3bafb181dfda208","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2204292129.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB7yNgXPIOIQEhl34sLrn862OaKAJ6Mv8fGcnBNvlWdwIhAJJoF7xCv9TakwcDKQinhe/B2tCJdM9Ip9I0Ir1ayqMi"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibPJXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBZw/9E3m7O9jel2rHkCCCb2MbfHEwuJcyTq0CumOS+lV+Zz51Yth1\r\nXNCgebQtSOogYyG+KJ8xxpqB/eSyhU0RwuuHcW6bGwy5Of+z9DcPWPtj8WH8\r\nRSEEaz2BCWNvBWm/j2AbjojUritljRh2jAQl0IuoW5AaGOnOhhsL2L2J/mKE\r\nilzH+I7BRzVmnurCQyIAIk54N1/NFwvIvRBkjR8zCbCxaBjJQUp9kS6ez1y2\r\naulyjcPfizoQPgYqEJqHNV7u54/G9JifvZ/KmmjUtqBkMLzDEkXZKvHbo7CF\r\nRJZpqEv5jh+c0WuCWXTnH9ASAijRVAmc4PSCccuXWEyf5Ev6NODv9PcVzz2U\r\nij0XKg/KsMEnbBJIlTrkiZJpe/HVKqceq6WOlKUe9ihUEhcZL0YwK4zmaFxq\r\n8/uclS1IptQkOdWARXU+psmE/LH+7IbCabjrh/69f1jFr1sTAtmgxs6g7Vqu\r\n9KWy1qyRp+UkRCTefvoHzv586Z6lcaZpUlg8/ukD8ttqXE1pAKZezNkVRRBp\r\nGyWPwcvG240sIcSjSu4BiDOsgGXUfQ0Jts2yx8W9kxJF06bcIGz+DSH1OVkz\r\nqvdLbpFmM1zmBZIYHXnvElm2Dq/JHsARxVjHuB9RR3J0Etiq7ggOrgD14B/I\r\nrMoEwIUizrpczC5AafIvGHcr6uBLOKCyQV4=\r\n=ukVw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2204292129.0_1651307095308_0.5713888386873005"},"_hasShrinkwrap":false},"1.2205031420.0":{"name":"@bentoproject/accordion","version":"1.2205031420.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205031420.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"d3652194dae7f17865db127c7135ec194907b7fb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205031420.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-gaXxN0UhXkjwwaITjLt+4NzZ04qcE4HbTUCJ32D+XIjjTf9dEd1T21noXX7eGK5UsJfC2/CJ7CDUMS0JCxHNSA==","shasum":"4633b4d8e6b71305836428d9639763e3677f5888","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205031420.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJNIln/wqnecdcf/SGMvpzHBbfaAf71/AOAzzB9QCjRAiEAzn1p3q9Bl74zQKPaImzF20AaOvYEwprqyoYUKrWC7e4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicjhwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNjhAAk/kvbVEek/R+4ysOwiWJNs0IIxJGG+C39BtwZUtGCgP3kPqK\r\neU4fCF3slQnZdeAYl0zcLD0xiMVnUQUC+6hauunuAhupWCp1cHeq/zj3wHD0\r\nFn95cyqzad4Kki+MgYg7l5CHLtVRCY0U7KcRlHrlIL0f6f51F7w+cmc5xU4q\r\nB2AwKmp3YyvMJc53qQY10NVs1wJdgE0+2G6d7IlpVTeNvrazWiZEQYgRKoDi\r\n9yeOD2iac5evjVib8a77wR7++5El9dnQGSczcJCxtJ0ANI5Vv73x7Dlm0pDA\r\n+iX5oEiD1G1X0qlYSJj79zdOQWu9+oZfDxNCJ7xPazlqDvZmlE/KzpTuFl38\r\n1NuitYzgaloubhgS2Dx/U7ZhWXbKstferGkcZc3ut7NKbBTbdX+t4YZTZmO/\r\n52CJFko2atSQE/88MozazOI4PIhoXdOXXBLwav1z5kOTCDYdpXkR6JWZKdHX\r\nyydcdKIPwvcgGIVcrX++rOdymFOg/TGO6vvVnRcGXTry7471zvrF83ylcifk\r\n8liUlaymUY5ieWx0B1mbx0E2vllX1HtWtCNEeswnOOncSRYJ/Go0rd9vM7QU\r\n2+Izd3T4pbiBZpADt6388iQNnL/1rUxsyPm1EE7oVDn4YzJMlpD2oQNrjT/J\r\n1tbozYfLIQ2ZIvlWCR6/81z+mh94Xq1auOg=\r\n=7vLp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205031420.0_1651652720471_0.1587985876300002"},"_hasShrinkwrap":false},"1.2205041533.0":{"name":"@bentoproject/accordion","version":"1.2205041533.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205041533.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"8c9c66c7b1ace99b28d77b82807f84e9e8cb305b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205041533.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-XGA8IAGLIPVGXxKIhd88TQEMFon/Vi9OXZokZw0OOP28NWJAcO0rQytMulSb6pT9AbvPI/O00YOVSFdxYjJzbQ==","shasum":"9c7ad92e7493ec9b8cb682f05ae4be3ed24e2ffd","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205041533.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDNNdaOVnj2Zu1hY6Y/wNqv7ziZaAc/hGux5BcpLVH+6AiB/4jhTO4MbZZ/x8u8N5yjv457hzPA2FLhRoh//Qbd1TA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4nqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFjQ//YdR5m/AcyKWT9jxaN4NAh0iwqvBXfMEyx3s+wh6l/Kdy1sLL\r\n16wFzx3ERpf+BiP5N8jQpD6LD59YtYW8Cv0C5xJ1qZYbSHrzMkfUyscl52wR\r\n3fPQwmGy8ShSxuQO55VCXvWtZ8qkbzfsSGZuuQ9P2JPn/9yDlWHck1DO7xn+\r\n6EdrzEd5ezsBo4/uZ/BiuI+GHlGgZyu88S2PGKdWuuVy//K12Cni7DUWFc+f\r\nea6xljUo0ndqWWpkX0iFS+W8h5nduvayRxUAMPpheM258nCLDDl1ovSTVPa8\r\nWkUho2bBvJypNgDuqtYnrOcScK/7E6Gw9qyXH1HaRImi/RfdZU6CMjX7HsNF\r\n7jiViN6QZAUgg7lrexeDywnsGHCfZb7IW8Wosi97vuy6rHapubl5AOjurf0Q\r\nMFhbNzqnX5il3MRSdWf8bNd9dTWqwK2twoWdGKQGoPd4hXPthg55zlOsuPlK\r\nD+E+S2RiImGK7tKk4p22z6Ma1dyKJUKp2vfOh5Fr8ySutocI+qT54hchg59W\r\nucI/ySXylzd2XdWplvtfLy9u/+bhpzNbL/VLS6NnW09RW2+nD2YbvPpubokW\r\nTPCk/7mz1wyvEueYjo/fZHaBsnViBwGl9IrSJwJ4uwKJvKs7sv3g4PwmhEEx\r\nksy7AURHuA0G41y5IWZDS3bH+lHiP2AnBp8=\r\n=+yNW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205041533.0_1651739114201_0.856720369266853"},"_hasShrinkwrap":false},"1.2205051832.0":{"name":"@bentoproject/accordion","version":"1.2205051832.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205051832.0"},"gitHead":"3658b8bf865c7e71c605f93088560c0657af9cb4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205051832.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-v7HN8WWXsZMdP/h6U7I9YmvNP6J8Kfx4IYZ4a/YX1AGYJlZi6CEuccOzyBhHGTyBTyjyeDgiH6LT3l+hha1a9w==","shasum":"ee01be8eb91f8f42f44c5beec37053b8005c1c10","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205051832.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKeVrvl5h6wflaXMwrMPzTyNwcEfiM3kB4N7EsAKU5ygIgcPtEvt/2WmxJqLAu7meWBL9CaxOFHXS4lZvYkDc+vqM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidNtuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk5w/+Lf5NP8DqJfFLkgMO5eKucyerVzxBPHYDVViltx0MNUh30jHW\r\nMJ8+NNnjy3CAOGluqp5JYSyTjp2qHDMAU8Qt3rpyNK7SicZ7j4QTkBiv5Ocy\r\njVo0JamTd7nYyxlqQdCrgVlhNWGt2aI+OfvmtWFjW5LA9A7jYuW9JwLKcV01\r\nhNOmHng55PJeDz4wEtjyFiV9tqYHt7pUh4eX2bmxN5GqE3fHfHr2SAWtmYrx\r\nrbDmD61PjXnfP3xvw+ki7YStmnRAQPRpxKSEbvpVwpslQs1ZtifaXj6X/Ot8\r\nzog8HgDyJQS01dwd0m9sAaApfhTATrhE0L2WypGEp8glrSYEueMc1eg2476p\r\ncE8BQrXr2A0XFkELgpHFK7Dp/3r8BXP9GGocXROOFeZ/tDeihLN6O5JJS40B\r\nRZR9tc6ko9oMu5jCralu5x573THdGGPHjO/pn8OFqW7kTlN7LR6YC3u/zAUx\r\nrfgpqHya9g0p3UW7X12w4kFBlEPBRH0Xny+zD0y6EMwmS2J4yD4XIQVHn8zI\r\nBJOMUhkIIglkMzPS/hFLV53YKfwoauNOFeIIDr2kFdgoN5NCNKZQWIwbWNRF\r\neC1aYnwOYuM9mCNKkzMctkNJjQrIPILADw/pOOTrzDWO5JgOQWoWFA0EhI/q\r\nYf2VuGDTADx5sVHp8lOHfHGlS3ABVROdfto=\r\n=ZjNc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205051832.0_1651825518569_0.7779902666328646"},"_hasShrinkwrap":false},"1.2205090810.0":{"name":"@bentoproject/accordion","version":"1.2205090810.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205090810.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"3fe2ae4108e8ce4355c90640458d13cf81af160c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205090810.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-oiFnyFw6zMjBcfRw2O9LdY/hKtiPPOzW4gLh02wP3qw2gebItxWh/EVZrnZGKa2wiDlPm5yc81jVNBvae2yIxg==","shasum":"2e6ba357be81af488f2b2833285afce650249599","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205090810.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID5mEb73qIB++3rWU4i61VFNxyp2YhPwmPmyemBnEk+6AiEAgKj8lffL1FjyERkyDGqNtfO+DATqag2qRCL8N5BgYD4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieiLgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpC+A/9FbNd9Ly5pfvxX8b/vCUchiMvPEHZYRofD9YcwLbH7dGv5Y54\r\nUn5vWGAZh3CgBUi70eucPmnh/22ydQtzkoBWt5ADQ8+zPOaOkr5hgVXilRSz\r\ngRkLtahVAgZkXukov8S2ELK5ZfRwABfD6OhLMpaQD4yavKtiO+R6l4v4PnM/\r\n/9UYY2cdSnokJIdB4prgc9kPoEof3STEak9fcy3bpN6CDFov+vsD+koi42dV\r\nxEokihHahc9wghJsDPUuIzZ/ftajtb4TfynfKtpGVV4sptndAwvWBhJfosPY\r\njmhp8F9WAyBKkz6XLDxbFJVQ1PZD9vznGbZB/diDgQ0AzEg4K2cKLnU9NdVY\r\ndnLZE3ivaBzYHHtk8tPBYLnJ8sY7+JJY2+bsjrsB3F9Uf9ay4xboQ+DSryau\r\nc6SxXlsFo/1yBBCqLsme3IwQVT12ITODs3sF8xs16n7RZH6uMRSwOU7uU/2e\r\nymgW31vIVSxiiYtFOKVueaL7sK8dq4MPOg5hQopZCJ11X0p8dsJdhi/0Sxj0\r\nmRdfdEO6u5o508YOTkGdc3Ic7T/S4RaUGueRKpBEz5aqbIB3AoDbRHMr4FDL\r\n5w3WIr5dhraljxRm3RYVbOmbUGsdoMo+g0Oans3HCVWyoO2Nls3WoyVPxJ/u\r\ni9zIGzK1xafVN3X/JmctKUJKgjuOavpNvuE=\r\n=IYWU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205090810.0_1652171488525_0.16161559035646111"},"_hasShrinkwrap":false},"1.2205101904.0":{"name":"@bentoproject/accordion","version":"1.2205101904.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205101904.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"43d879755f765aee2d0eab657533b493a025713f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205101904.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-KhVCvUfVxCnQ4TvW59GuzXLKKAW7qmKYlPtmZrPPHqya3bBSzhKbMwBMKItKXYdytJvCsl9vXajrqV1TsJdJYA==","shasum":"df59c2655b194bf2e71a8789e8675bf214633b44","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205101904.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSArim/1MnE+ksLoraACI4v/SdSvQe8czAL2STajDf/AiBmvbzhY9Y/IJYdKy0BChlT40euD0KNbiui1BTqmtrbLQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie3REACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwuxAAlDobfAiOcsahdZ5fof7PSeg9VeuWhzf0WD4JZSYeWcvbnwHq\r\n0c2cRtHBmhL+O3nXVBcuVVvaaDpsj3scTbsgtUJ+RfpPO0IDyNFJ8RBXh/47\r\nKCHyy2lm9MGOJCNxvssIZYqP7tGU7LnlXSNznF0AqX0FDZSf6IQhY8AqNdx8\r\nrV/MaRTaIrjfPGkM8teW7rbUNh0fTNQT1ZNyL0eCuEcEW/bVE4ySxo07wwBu\r\nXl2w9flyirc82TaRpRiq8xiNzjUwyuR1/FpcAULx/D7zQ6z/r0BzQDRuBKJ4\r\ndhRXvdt90Oo78mIEUgV+RrUBnXeOTpXBu9mNG57abOky1AzRTBNBdklDDuEp\r\n4qVbNELV9iqVVqMVIb6xH1fWBEyUCLagcOIxojR5na9siH03FyVaMNlir7T6\r\n6OmtgJZU40MpJu2pE9B2V7Mj6MioRbPcWlhbZPQlx2QQ/J4qJ0Sa0iGJb2+G\r\ncl/ITftCJquL/g9sI9TbES26kKxGdeBOj8PUi798Os94Ax0Mp0/XGQ+/QwNM\r\ncSOGytsbeyANZTz33gWmkTPN88wKcNUSzvNyIuqSWfTaOY6PHaZr0qpPUQQk\r\nK9EZ6EWKKnzgbsLh+l+ou9phLXRshfJZnHtrpG6vYkE5hCFhtvPMayvYQhB+\r\nELeRjFz93o8uxLs1xc66lpkeDx+JCmnFAik=\r\n=pK32\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205101904.0_1652257860599_0.03984524656646027"},"_hasShrinkwrap":false},"1.2205120110.0":{"name":"@bentoproject/accordion","version":"1.2205120110.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"46f34860b9f501caf0eda81977d1ae3aef4a947c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205120110.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-blPdINr1WMf0iige4PB8UAp4GbsjwE9HxYo0JqNqzruGThEKnKo8Uw+6dJchEXc58iZcZoh/SoO9NlQvM1kznQ==","shasum":"0161cec15260f2afdb4f8ef244a98fc21ab71ffb","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205120110.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnLq9mdQ25RhWQkKm8yKnM6o3TtMwBTo8vP/nQEdDMAgIgAmrN9Xg4B3xUZzQznPd7gI0/599CuTiIiaNo76ll4G8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifMWQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQSA/8CWyGYYc1WCNPiCjm4KnqLxmWH8RZrJUhhQyaBpJUbLKRE54M\r\njjR7OqXxGVU8ECRZFKx++wdqLqahZXME3EAootSGA36qlMMnxN0ItPieWd7S\r\nCGQrPa4ZFxpdVZgRzOUGKEw/N6tjN3l/KR5NYE4b0sLTUjBJivGtQDrHzcsx\r\npXhER371iS1fHvvbl175DNt84h4jroukdGbGNFSTB4ep1jbtzZNf4j2fSu/4\r\nIxMfzFCQbIYksx3iCRq5oMtjM53FHF+VpfTqhO6jN42w/rMbaEE0eG07C65u\r\nSc//NUQG199NkZv6Z+WXiUZkIKEn6Xpe7FAVCBEiVqK8jgZOPVcdE3Gn/NAs\r\n4Qm6KuJK5vS6vqajSvKRheOXx5fLwByU0xy2MJBtAz8OA4yYPCpvpXtJKmbW\r\nfp4b8zkbSv5FaaCYz9LbyWkRYykZc8HAgnvn3O+nlC6xA2ZYPgLm0Xa6ib2W\r\nx303bCFISHlTIJU6KdyFO3AISbEe5voDqeK61PVj4VhRM4CjpEFH+PO7D9kZ\r\nl8SspQ+t5skJRqqRuoDOs572Jcz+1ZbnHJHojPzePiUC94CT05ybWM+DaUsR\r\noJuVRLAb2ZQmHqerCuh5pSB15pM7sSBR/sNVY3AiP3UAt12ctzZbHS62hKYR\r\n3WJQmhrbbURMM/aRbcrK6PkIjJxejDoU7vo=\r\n=aoDa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205120110.0_1652344207797_0.8781560731634985"},"_hasShrinkwrap":false},"1.2205161914.0":{"name":"@bentoproject/accordion","version":"1.2205161914.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205161914.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"2fb4e151488ba4d856b33f836151d66b45ca457e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205161914.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-LQu/ioaxxlXt+WNSpAYfZZPujy3WHKYcSWhQ3Kxo8ZmIMecIQu4D6uxn6CQyMd6BG+qhk9kuL9SYrK9u08mi+A==","shasum":"6890c66f05812603719b86bef762096306c4b47e","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205161914.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYJrhTu+UTZwWkJKk153UoV1Q8PQdmSxw3FoTdFF8EowIgZ/llckuDx+IAIbg+hV8cTn6aLQylgXHc4kclgdkslfQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1wBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuLQ/+OtrVRwB/XIZ6qPdYunkf3BtHXRrlQZmnoboKAF3HMNHP8l2n\r\nnKDRARQJ9ADnEjBEK8jXHeIlMhNOVD7OXA/v83uL9ZHuaB01uI84u+UotYnr\r\n0AAphN+TxZ8u51liqLIhhJomUHLtwrVoxbrWO8K3oVtDL4DyogQ3nUAnVy2r\r\nArziQBMSEsxGVFu37ppd+gHliPOG6zF3d0fjestIVx6Ij6p4Jpz+zu71JnEu\r\nfZQV3JXkGzOHtRPYz2P47WSpPZ6u4kHahDyIYL8Ht9QTp5xtDtnmuqHLH5Jn\r\n5vgf19O1LMfkZvxBR2wDFGsye04dKPo9rN/mgplO+d5bRUktDIfgqF98TSOt\r\ntOss9g1jS2hf/ynUYVO8Bv8p3RTybAR0wE/lw9L5BmQql1/9GGuvX5liJqe9\r\n/egEdJJS9YODTMGBmTEEg7ngCAyIhbxZLhVuNFdainQBZaXQC5f4cG8ugyhp\r\nk64DEkEdbC9TviLRb862aTBlJtd39Avbdl7wVF0/g8ZimfjMDdtpN3K3wx5w\r\nN1aMFie1XtlknNrvQ7fW0qFPy2h6dtsFOjhN9uhI3unJvPbYufjPnpPimmqy\r\nIY7rx6E+HVZ15YuSkXBX0KzCC0LlVPzbeEX7NYkx6vRUqVnoMEOD6mlv3UEI\r\nC7n3B03iaRG450aQCTmhV6zHTfZzr8Yk6HU=\r\n=0dtg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205161914.0_1652775936971_0.49945466376038494"},"_hasShrinkwrap":false},"1.2205181800.0":{"name":"@bentoproject/accordion","version":"1.2205181800.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205181800.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"fb3f61c46e2221f0f2e1dd836127cce386c7bbda","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205181800.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-WnbOVM+k8+217yCnDBJNRoWwmTcQ2yiKXhOQfuBi/TDS2p1bisJqb1Qu+0PTrx7BgBdIC5gRi1WQ8VlrCAAnbQ==","shasum":"b5bfb699cb2584fc2eee34eb6c54b10fe9458cda","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205181800.0.tgz","fileCount":31,"unpackedSize":744608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlPqbMSlKIkc0OKdRCyWLXSGOl2ntpC4E6Li4JUYi4xAiEAp0AhESJWwu3JJQnyTHtpHTtGf3mdT+V8ZIQ6/PdlTRM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihf8YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofwQ//dpQeNsV+rX31RoRcrWq2Rsk45tMdlsZFYRMg9mlIuz9dH4s3\r\n402fslRu4g4XuMJVq7wg3JrqnW0vEg+HSNdtc0PRUAJTjeTnviUni6UyKSdH\r\nWpkp+xf0EU9OUHMyiU8zkcRG8vvcovDoE4lTGyWSQ+TVKEXhovO8qAKax7qK\r\n2lbKZSFsMSBtfqt8tC9ImnJUgPeO7Lep5UsZ+jeKsqn+Pf8/WbPeTBha3Olq\r\n0+ILlRD2iXl7VUyKcxmiYRWC74NWYVsDWJFzQ+rJZfOI5qF1SJGBCh3IrCFH\r\nD/0cyyYgU8smy3b4vkKQhgvaF9Vl8kzN/IKzbH6ynffsoXdAwxJxtVA7IfwK\r\nEq5VkOq9J3A4GJ7eZEcfTMl6OKTjj+jheeHMz4YbONI0p8CdAUjCw0xEdQfh\r\nAgKcoEaPdJNqNSMQJ/0X7CufehStP4OF7Xgn1v3Sm2f/Z8vjgiUxBDnp2HlI\r\nRMuIaLQUZuyd+LFFpCindprLmfdk4uo3s+PO49vAdsd7zeWnxXcdPDz2GZ1E\r\n8xDdTP33gtlrGOsn459P5dDovtebBPeIQng7SnE7nZhnHCUpn4BGhYfM1pBq\r\nfXj6f6YvaxQ3JbIuJeT5AbuAqiAfBPcJjzB2voCULS+Qwngtnkfz2D5TAB2k\r\nrGj5jWW9u0qKTg9CXifSYzkOvdCIApV7k2c=\r\n=kq03\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205181800.0_1652948759778_0.011204731695115377"},"_hasShrinkwrap":false},"1.2205191749.0":{"name":"@bentoproject/accordion","version":"1.2205191749.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205191749.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"83c369066eb9c7dfccb12aea936f29a84bad30fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205191749.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-PKlWrd6LsnPyQCnkglsTbIxE+a0dt6BKPa/KfV+fivVpImTAWFSqKQvL/b8fTP2/rGCLtSOOXijpzTPuNnq4QQ==","shasum":"977f7e5b2234550500a770ed653b1123b38d547d","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205191749.0.tgz","fileCount":31,"unpackedSize":745808,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC06SqZK3KYrWzK3NlPh+jcR73yWL0BSoNFqLqPRtrloAiARU6StMeCngI8cMJwMx84y7cUapJrjBb0/xZEelSaNkg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih1ClACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Mw//eTK5hMGvICCkPLIq35WSeG5iwSE1cl1eI6LVRfZEgXFnO1E7\r\n9YyA6FVG+2v31TQMnEcAk75rkqvgPYYeFpgGCq4afGu2BqU8NI7DNMdzT986\r\nzPVDaCPTlOM/drb9a6Et1kXq1LV+qVyiyISpIU/Oko9T1Ez5WXo66gSkoT/y\r\n5ErcG+1DynX5lBooeVmcfhzzDsNU4vZvT10XcA/86Spp5VFSdpa4zPzzsq3d\r\nj14vnhisBBJB2CLzU0vXTFA+CmAHKyQtPYP+gJohleSoJ2dA0RGJD0BoHZZ7\r\nlfzs/4eZUDGrV+4NT6B0E+BxCp/jMPv1w2LjfHvcYNcMp8Tmu3G86UeddH3r\r\nFxprJkKwvDwvoswXXTAt10tK2KxAFchgw/zL2yCN6IhOhWSsjA+aKp8c0zGK\r\nmppckq6qGOq35HHoPqsGd0NGMc1JsWk/+Tk/VlKdGf6BnvwiWHx3uYz93t4t\r\nHUlFMWKYuClOYvEkolNmDYf4uGI/i+wcZsbT41fuckpjJiEcg+Ea+DSCC7dl\r\nNT1jCcF/x793TgE7zs4CuFIZmr61U9qK1PKi7zCfvCqyFCGEoNO9MTWk2Rfg\r\nuzqtLkynNrSRQTGMsV+hfU8MaA1Onso44j0C1FYDj3XT0VV2SP+EXZb/t6ym\r\noAcckOhSEPAoiG5Ql2Mf4dMBVD60OLKiy4Q=\r\n=Anl0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205191749.0_1653035172883_0.9852096372452854"},"_hasShrinkwrap":false},"1.2205232225.0":{"name":"@bentoproject/accordion","version":"1.2205232225.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205232225.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205232225.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Xf7hjkd/7rRr/M8bVrSjx+QRmWIJ+IvzUM18ATuAEB5ZuOh47RzwzR8SC0SIQ999bLyZuiAZfT+QPL2QWgDnTQ==","shasum":"2948e1d2b348c6eaf84c170f5a26e34c491bed02","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205232225.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdzbViPN6RlXKWtTsKIbRF++KSeW1MTTgbMPoBaIyTUAiBw+Oe0idaGB8BmTjutRFVwAdwufBsnBpDIfiUP8v3wQg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJaEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0NQ/9EHpuv6xtyMI2/9lxmMD8XeIS2bXLUYRxk6X1hRL2j55+WNyP\r\nExfi3boqzQfFWmkz0JCHgfbwmFb2xZnjBnAFf2bBkhR/ffZC3ufxrm158RZ3\r\nJuItSAywjVMA1I0W47Dg9G2vPPLk8pahP7NonWd3Cuj1Jun9O/WyfDuUOLKO\r\nUlE/UBacska8siGRK5VqCdQ059A6j8GYIAmInI5YtMjrWRCvzp+4A/UyACL2\r\nmIA7/2D/7kmFHnnuXLmYbuibV1Vl/3mqBfZLtzHorE+KEcxzG7p90ngSkYTF\r\nSWaXcJu5ruKXi/BnGRTK+QQBPKtI9Q0tWL9zKWvgnTUlyJXIpLNPra/dsKG3\r\nh0W1abuQfo6ONuMLUurG61gRd5c9kkWXmHa5i2FSupWS1shNk6Ljx+fQAj7J\r\ntxy3rmEvPxAj9bVMtGOjVO7g0MElp1oEkYQ5HthLiVW1ZqB+zhKCIJop1gJI\r\nBTfltZmBycmjtU5VSG0wQnO051sSwRyauxVl3fXVuR+ZGWVDLEc8eHuY6q8C\r\nBBD9RODiaLeh07eG4HhXG5VD8pMyIXU+WMefzCG/qw2/sny5JnWI6Px21iZP\r\nMekjs9PiBsvo4KYJhaaO3l9/28HUfugRQAHy4ER9qV194I0E7EKPP7TRJKDU\r\nUk80EacrDlN8f0GtduIJmq8KUgHcvu1wsHQ=\r\n=YfrC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205232225.0_1653380740460_0.5993883497116272"},"_hasShrinkwrap":false},"1.2205120110.1":{"name":"@bentoproject/accordion","version":"1.2205120110.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.1"},"gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205120110.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Eje2Sg3smI6nTsYYv4EpxEyNIOHUYIvE5h3ENXKOQ5Vqn7o5T+0emFyn7lSRxSKqi8ldOQg/Hwp0+LDde/Yb/Q==","shasum":"e13d87d66fb615153f7b16a4e025434e1c88ac69","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205120110.1.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCO6DwUJVIY4/zGNfwXayrkkVivhPoB3D1F3jKbAZI0DwIhAO6hbuxv+V9E2IEuObpoPnbN1qO4N/rRiIM7GadxrcHD"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijS4EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQFg/+PSSUvRdT9Nt1dIHqXSxIUUaQalfGmKdXUfYEtoNnylMfMGXx\r\nK/S8djI0q1zG9waG+spfvGvcpB66GjI/J8YK0TFGOEKXNni+z0qc9mEyR34d\r\nJlmT63gBzDT/ZIbuBdoNBh5aQsjXArdOkc5xmq5V7rldVfheVO+MxQiw1QmP\r\n96hZnUsUdw5zAVi782THfFwYY9jjBLgEVJyJP4h9cWLfyC5dO+CtYCL+XDCr\r\nEl3ItrXoL+k38BLwVVBC1kVfgF0xZEmnwKsUobAA+xf0b/kh5G0L+llFMZ4s\r\nCGdkSb5SmarvdCpPM8XKST17TMA6t2wV8C1MmtJmkjGhFI8Vaf2sg0xTafcr\r\nxbLnWKdlvFH8BMwI8Y7j8but7cR/zCkQGquQX+RUfm6tQPboKOkYCSNOpOJM\r\ndKV8/M1zo+Dv8EPk5C9gwxYcn2qK1hW4OXPQydJi8vu9yZdJIXKNdFJOEnDO\r\nirVVI3pJhU+JcCU62BrB9PJ9tld8nCjXs68ucaYf+rNADQyKJJB/JoGicOzc\r\nF/KOcOZbbhDvZSglgAM5q8iuY3iNMQ9DVPckasYB33pZfn59KDxl7zKb0ayL\r\ne5GOsIM5nOQ1fXjLuF2Iy2Dv1EqnMHkoFE+9v33WVv3vQiA44FGEjtWylYhP\r\n5Bi8UAKtJ7sCF551eA6asUeCGD3WsDyiOaM=\r\n=6zYy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205120110.1_1653419524518_0.565849836514799"},"_hasShrinkwrap":false},"1.2205251942.0":{"name":"@bentoproject/accordion","version":"1.2205251942.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205251942.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"e2f9546e2689785f0d9b4ba72e61759323c45bef","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205251942.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-1XJo0DPn4AwR6QhXz/oU5ndDOBkMwL5nSf1+d9FCKePpjhxtdbFvF71YQW6Qm3xo9Tu3LCiCjW043ynSwQeUog==","shasum":"ea778e6afa6fca3b76ae5bd6c3202ac155137b6b","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205251942.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqaOk6bxAyNEXNT7yRLzZshaUggW9Q8ema72xt5AboiAiEAvOKP9KG5SDVBNLBd+j+A8sC10R56yM1/RJRFoMba3xY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijzmTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouCw/9GEFGM9rrJEKgFfzQLdRfCou/745IkWfF+PwH+He0dc2cLQ3S\r\nLtwYqsgsfZ8k2SVHkKjXojl8ptGgPKLfKvXpeiKEpNFjJBug4yZ88vgepbrV\r\nh3IiXAuuTqomyxdfxQ4r3d7q4vsmfSc/MXCJk2TUDR3RCiZdEGGO7BIHZc6Q\r\n0JV4truN+VDMg9UTHZ8EYG0dftyHTZ8NodX8A/mUB38NZcj/KLB3O5MNmKZ+\r\nbhJ00gCksflisqOdzs7WpbYCVfOvksviCIDHDUEXfWMMYqgCWCRTs/+Z3iIe\r\nZjxFTaGkfrrwW24F70ZXYq2yrwTzAh6ZCtYLFazixJcYP1XnHFfbuHlXxX6w\r\ntiLMtB2nEBzcc5QCDa3ci1wGw7Ab5Bm9ecQwsyq1dcM2j+UkaZsW2Uh/mpCd\r\nbBZwEvSrpW4aMt9zTpcT4uNxkM1/HqFh1sdT/FrQMQwoAtH+GipnIMpoZXxh\r\nKMROQ8ADN0WbYkby7bUwZcOSZirjC41ZirPxxKkjClZVVzuM7v3gLOE6Tucu\r\ntDtapNxHFQsf7zU3bL4uBACRjxvvnrBLO3qB5jiTOYM3UvbwHuk7d7GMoQ18\r\nZZ5HpUU0TAjH8Fz7i72gG1ukpl/x5x/8awdxZDCcLeq/2fz1nxxCsgs2Iqac\r\nTBSXps+8z4G11VvTEMhAC3gCEsVnVneKmo8=\r\n=Xlro\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205251942.0_1653553554843_0.3600777103911672"},"_hasShrinkwrap":false},"1.2205270638.0":{"name":"@bentoproject/accordion","version":"1.2205270638.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205270638.0"},"gitHead":"11e6020f1ca745e65b5d80408e0beca2a8d38004","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205270638.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-HCrgRNfkdZgTAKQENVK00bxfTRLmk1uAuNZsWRgEzpTJVeUPxVCJwu2VGfvxwYy7OApG2mcrvGcpe/5XRhyz9g==","shasum":"2e616156bd84f72c854fbeea226f24e534e40bbb","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205270638.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaR/GnzcKo6X/oikM8BCueE04gBThb2TbgDtCSE2YsGAiBMoAS1fqGclbVrk0bSsjHo7wPqcZcjwtqEEjKdg2A7cw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikIr9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHIQ//fTLUT7Hmy82aPwdA/GCwmvdeqElwOpZcG1/e/Lgg6K46lGLI\r\nyxbY3a5aW+yDUhowpis/qSe3ff0tqhm3rzmrW+cz9ODCl50t0IsIq8znASWq\r\nNRVz3lbTIHvMIXfphB+bF2E3W7x7i8z+JPYmHhfts2CHpJdZB/x68FEusd+f\r\nn1zXTGXuv0+lq4oRL8fYdjSEzC5F0mcLAJ+p7NSg2jUe4F+cvmFx4rwzjUYj\r\nvkV6tk1qTFeeywc7PlUwirnTTmqHuziyEdLHAL8wRQlNbKEyG2gPfTthor6i\r\nP4ux17T+sgunQPCuAxexKECWcBj522CJgmjsMRVt6OFYsz4nhjijDNPs7k7m\r\n3eGCvv1DniN6n+iiS0dj8fKlvqaDE3rT+Duf93FOn8NAj+hlIIhdAByUA9n+\r\nCZZQidksQKMU/nbipQKO/8/+sdpMQp8HsygMOhC8ZuAwGEGLcAGxJmqUAyEI\r\nP8vCq9onEgGeMh9P5aof+8w/tC3zJB4qenDfxnfId/lyQTDi+tCPBVDCVTh5\r\nyUzlaL1gpVMYebjsYdfwJ9AmGJ9/y+kNw1q53MsxCEIq68RZeLvB1GJqOfNg\r\nRiNhsIf7cNtvEyQMg+qF5FVnGHeCexC5UyfKRsaxP+B1iJfgpOXDkP8XKFyU\r\nJotqruocyPnzyhg+ZqQqv+9xjUfUn0cXaUg=\r\n=zqCc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205270638.0_1653639933003_0.6758986758583296"},"_hasShrinkwrap":false},"1.2206071918.0":{"name":"@bentoproject/accordion","version":"1.2206071918.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"f200c815cb7bd0e1495bd9c338425aed1887a459","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2206071918.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-6xgBQgAPZhv2Rp9IW+jeqdUbUi8FnGQQj4eo9YWogBIpxIZcc4mcgYaos7eketrycldPH1t47Ed0tFQJ5nbyIA==","shasum":"b536f3d00242cb10331d7c35e4af0c11104bc3ea","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2206071918.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIHNyzhdPNpEQGVMWLS64BlY63phF/6/Wb0RWqCp/a2wIhAIawveqIDjSGArsiKhEB+PTM2Cp2LJxBZ62L3S2Mstbe"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin9DAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgmhAAkRZPuFeG/KTXKUsKiPzQP6jZNsKFyAd7wMAz7ao8zPx3GIc0\r\n+iWA29nt7ZTzwF3F54TpD5ftIgZpIVMxZ14BC9clai0IUHqvuMLH5sDyhK4w\r\nupo1HaiXknXxsS0mu9y/8d7FhXrMSfTbdyKMlp3f3FCltGrAEQc8XkKAIHyF\r\nUo6ku5w09txuWeUcuragE/Ip0PKwfr2clfpgjhMOnckvj6QVc2lOoFnkM8Ai\r\nzrWgPSTsjuXRADmJiCSCWzVYwwJVpKfgtiU+XnKp3PPc6OPZ6dJugzfQbURO\r\nglx15PUkoLw6NZYXs+jdRqTK9mwnurKIy+0GvVP4zNIebfJ8rPGTOIzl9vGo\r\newEgm9JATPbWcLctgb0W63lYLAizUMBYqD5g2S1tzSCfXTrCgQULuPrE6R+f\r\n/Vq9uz2lnmhGEXBOq0V5J2oZFb3WFmn4Q+9qMNFmzTum04IneWYZTnPP2c9C\r\nuSK+rHUIcWn/DXVPeGu77zvZgTh2Oh9nDCYZ5N79At0Ee2GC+E32nVJFJ6PS\r\nXyGXn5u7WyFd994mnSr5hFC3h68PzNdUccRO0JcupgbxZv4j3CMXnPAKUc/q\r\nsVmoUClxbuLbz9+AQ8nVROho1LSbg571mWmvvVo/tZp0wDfay8t3WSvTF5rG\r\nN8DX29ucFDJh2ajMb4f9QD0mKwg1HGyegIw=\r\n=Jm+3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2206071918.0_1654640832463_0.9867422095320861"},"_hasShrinkwrap":false},"1.2206072228.0":{"name":"@bentoproject/accordion","version":"1.2206072228.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206072228.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"9cfa89fc95b4eedfeb00b4eec539909f0b0c0f6e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2206072228.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-9B0ELvcxCH5q/q3yVnZD86iqVg4kH4DWaK57+7qRpOimmmtJM3C2RjHayWi64QwQ+4SM0eSVhxGsh4H4i9tXXQ==","shasum":"c3a3587593cb7759154504a893a385afa90bf437","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2206072228.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkxIIYeBJO9d3FYonmC5PzbPx5ZH6mBEtoCmk/4vPErAiBuhvdTGHx0DAPelca6fPO4CjolYD05Cf2otIIStdLUYw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioF0jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDVQ//fyRv3LnP/ikRvmSgzdDZ11yGv1/nHYQ2K2wTOVSlRm3JOjFT\r\ndSW2GdvXdhXtuuc8zLKn7H35CR6RkzMv5US1qD1+UaVBrg+16GkoDYelSDm6\r\nMsU3FU5gJLNDL9/zJS97WCawvzSKeCBUhdJ8krAQcd0wx2nQWZ7joVoNV+Ll\r\nBs16QTm9J71P366TYcSxxHRppGSYEPTOb0K8rOsxVt5cJdkNY5E/ODOwTNzK\r\nCUTQECS5ijYKGN5P6eqMsoyW8Xx80gFonZxBk/vcbZPwLw5+BFzqWT72ggyy\r\nfjiuZ4Y0zUtvDQgkez9PK57oibyUSrAaHbY+3MdAS0fcAo5Vh3h7FtSKu3kD\r\n4/a0rJpqqEKSePaTO+JPnXlA4f+oJb/bJ+PJNnz3JvxlmA818kKWqDvj20Or\r\nGrPNXQsSHQKBPDsJ/D/9BY//+HJlvkDEzIHa28elvpaUBlX4BLtgNYoihcO7\r\ndr40P6nR6MD5mmr7JyDCqXlhX4ktZsNuFjzXN5XozQd8AFbzmlJph4zf/AWS\r\nr1d691jB5sHB3JM2KTqF6xIFbDoQvjQ6JzdXPR2xqs+M/u/ayC80h4nAYSkk\r\nDgV8PxpRMu3fqbiDc2kwSXjXRcumNPufy05zS/1FLs8xckDgalGCUo10kjbR\r\nnKHiopb4D2sRKZBL4V1OOUwhyitK99iC3Hc=\r\n=aC0f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2206072228.0_1654676771340_0.7917530687206256"},"_hasShrinkwrap":false},"1.2206082301.0":{"name":"@bentoproject/accordion","version":"1.2206082301.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206082301.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"32e83d3790f33da4840247d996ed3f6b256a796d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2206082301.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-U5eywpBExOjXcFldHcAWbr/Uzy5GhJPYbsJXS5HOlI765M755Zli4iT6JB3b5hWALioEQvYb2ViZozt02Qwbjg==","shasum":"35354bb040230c4e24a1574541a39848a3a15335","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2206082301.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6GUaeKArrZN/g4DJ3OmS8OzoWVzgN6X7wSsMIG+CX4AiA8IwrPvOdi6sgpsodY2TAqIWQbYUhR7ptEtYIT4n2cjg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioa99ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEyA/8D5g0hBlogxBg9Y3VgCIV0WVx56zFpeCOyCETEb5Vb1COhIfu\r\nEizL9GWATNEXd1cB3V4nDujFvGlqtAGiF5B2FBauqHbPp/d5u2uiQOhviU4d\r\nWK5sn5UPKwTqM7PAEBhlRCCjzrFri4aGDd/+IsKmNajMW65tQD/13SNr8zez\r\nodXBUaGDaLDMyWaAoTDANySoTsgT7UlumXP3sTaik+vUmMl8f2PwOGQNaGqY\r\nlR2bPOqrsvFqPd3D/HG1Pws3eSvnUuWehxMEQ1e62Zv8IRMzMZitfEc6QgTF\r\nEhDBs+oEBYlzVtgwZgcW4Gc1t+xnZ9JY5q3w8UTaPbK41GiwA0uSBmpHbjC6\r\nDmy1vjC3xmbB/vHCWS3fFD/jgJX6xkitITpxjCqroMNVRcb/YSucHS/+nTvT\r\nH2cGXbLsC3qD5tZkXpv6F7ZmiIAW48XftxsTeo4QmMz/xsfk8Y7qjqf4COti\r\nAEHp8F8nT98zsuSqc4dJFbF8WT6kARB2aGH3kzam0/iPR9JNn07dJsunhsa+\r\nkivUYGorMPC4Lvn9G7siP4FPYf3JEvtmVlRVryAqifZWjmUiu4yyF8zV0TzJ\r\npPIK/KAkmbihM0eOU78+5kzGT6YFeL1H9Ttyuw8068+ND16wHIWbVb3xLmbi\r\n7AKyTQmXrA/i3wzVp5dsqztqpf58I7S3QRg=\r\n=Mjfm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2206082301.0_1654763388980_0.24426889541725894"},"_hasShrinkwrap":false},"1.2205270638.4":{"name":"@bentoproject/accordion","version":"1.2205270638.4","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205270638.4"},"gitHead":"89e43e107472144de698a2c3ebc9e78ef35d58b9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2205270638.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-2fdev3ZK27YMOBjADUBSZK4i2fb5UEkcQ16vVDbYwoOCAHQKdmeu+RSYFnCuFhKMSWJlFNKt1Q9b7CE2cjMPuA==","shasum":"5b888cc426678cf66690663f639fe4a4e6c957e3","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2205270638.4.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDeIi3/7kdwywAaOLFE8BpB5qaGXrxccauEby8iOn7AmAiEA5Uhc91vVm2xXmpMib4FlRqH6hVVEKFdypTJ5TL4PqQs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio7jAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6zg/+LXHbmwYL1Gs8/LMwzGoo8Zu65ApBD+8mlYQ4JheEtWHTcc6t\r\nVPl7oa/s0X+UWFfds3VafFisVWtNXGFwefyEA0qmWFCICa12mgqMIH+/dTA4\r\nVIV0+WzQsdXlPpMKKuhHTiDVhGpqIOtlh42uF+sljQL4NKrENzADr/cGqBi9\r\nUygI0PZPzcWgL+u0R7CQRNyCZXVFig8AaPPFqDgy9wfY3Yro3GETGkufcqQM\r\nFlXgw1XNfjKLOIMJWSclSoOQSttreO4/tVTxP2pARXbbdbLcYpw/XCpyFwKD\r\nE0kOco+jjl1JUp75VR9F5MgoSIDAbBo/DzKG9hi7ER0x7YTnVQiLu72aOvoE\r\nISeBZWKtZokzSB72uXPuYoOBYxnpkxZ6uzbUiHTJvRW92r6Yhj44yDR6H8Rj\r\neYpgkuCkndR3iFBg1qx5tEPexjDvkIh3F8Likvmj8NyXcO0xB7rlJ4RYdRZ0\r\nyZslyM65XzkcpcU1NCBJX4GA8EOUI58F1jlqzyCrYy/zsFJMs71pJMJcRrPQ\r\naqcV+Qe3xmPDLoJ0ue1oaOkU81dUJ4hP5ud2EPyr6meRnn+pnJXstFOQ3nQh\r\njK/MCwPOnaRP6WVlBUQp27n+fPyzYTPnvF/xfgBkas0xgjONfKaMsmKCwMaN\r\nGjOeqeARCPe++XNdvanhfGEZzNTXr3IclQ4=\r\n=r5AT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2205270638.4_1654896831993_0.40380171649881524"},"_hasShrinkwrap":false},"1.2206101637.0":{"name":"@bentoproject/accordion","version":"1.2206101637.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206101637.0"},"gitHead":"89e43e107472144de698a2c3ebc9e78ef35d58b9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2206101637.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-C0ga7US624V6DUyonqI9fWhm9yqaY19zHuxuD0gk4zZwx7NACnBeL2zbnHYjqnwHT0Z8aJ4vfecTIsZbHpEo7A==","shasum":"b57f29ef2a14a04067ef203c19a0ed437a264a30","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2206101637.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0PPTle8J9v32+JaWXy+HIR+R1i1ecyp2VUZmNzrV1KAiEAnZUQxTMNb6nQaD8o1iggIwNtCi3HA8GsW7sPkoUokr8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipFF1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3kQ//WVUa2xYsnVD24EAlI0Wbv9TlJQy6KlICMnUlmOwp/OdheQMF\r\nhrJbWXFG+sDA+RsYS2sNDc892MV33zMqcO20FP2GAgko419ohKWg4CHWIcrL\r\nns6JL2CRWuDYNIZhpQtBPXhvUqyXYz8/4Aj7SaQfHPPSSOd/m7GhjHctWtsK\r\n93OWJhU0LKqqLdpYbFea1Iivy3FXX/BkO5jH51Ko17/2nst2VGce/22w+zEo\r\nsWmsH5rAiIzY8GdSOJtXiwfiTeZFqTSlTrzpZK1TAP2vjj5AHQcvEjGY8VMi\r\n4yiXxqD03AmnrlnEdyeH+Me+lBJJf+/ftF5ZWV9kYrRya29JQswNK3W0lulB\r\n8F4s9+5oYJIHLIxVEOGBUssehwXrEImFWojD9y8M6+JhO/vb5Kc0cfHrFbdd\r\nfR7tPcodR0s2jDOco/TJ0+HjBgY609HhIU5jjx+wp4iTyYUMaIdv+McGqa3l\r\nEbFCAOq7RomtwBHBwJBHoAQnyvxt2ULXku4awi2+YMW8neBXGaoWVgCIV8px\r\ns4w7tNxEQ3+y14/um1lp3ZksBabg9JfqU8DlDqre19L+qdkf3TdE5FtlAlSv\r\nr1qEdbfAa+3aH3wL3RkzLLVfs/aHdU3eyZdXdC6Q4M/ZH5Z9ZDD6JeBUwA9B\r\nDyHkhItiBRqc9BxnauEDXmvUyZvQF3ZdJT4=\r\n=AJLA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2206101637.0_1654935924918_0.5499058793709886"},"_hasShrinkwrap":false},"1.2206131450.0":{"name":"@bentoproject/accordion","version":"1.2206131450.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206131450.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"f8fbcf58e78ea43df73b529ed4a25e79ac758981","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2206131450.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-1k3oABRhGPrPd7QbZ2OBH738whDbghiz4gm7tnPGZs4FVV6APpvEf66qSYtF2K7V8RAKFVKNAlugyNqUf7vkWg==","shasum":"2ac4caa113d9f424633434125f07512a8469b167","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2206131450.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGzRS9+DO5gUozUfnmEUnw3Vgy3+ndzAlk9XQSMwvr9hAiEAsSbcmQf2rfnqurTnsWVIRnU9cxLNtiS3WvsEBg2KHpE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqEZGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqrbg//fxIe5V2DJgr/FSMKmLG+KVtnX9hXHuntcmyOhb+ywPQvisGL\r\nFkKrfkVuKVrmpydDE7gjwjdL8IK1Na1xetkreZCDAz0uMBZo6hp62GdIh4lo\r\nGCT4tDvG83nV6fAJOCaBoUIfM0y2yzcGer5PlkUHR6+7H6nhrYwqNIjVAQu/\r\nGfJEQnOzPKKv+YlBNsgw3yxvqDXJbwcyh2jzDbvFA1i2ZEsHGTu9z0kEYY2A\r\nJgycS23TI3GHog6XT6eq1w+2w0dCAmv4efRYeZrYDoA8sL5qjFiWb58ZMeOL\r\n4rwBmEkAfTYReHOfK0gXpRVQcMUtfz+G2vIa28P5OB31Ugm//N9v4PTyLaUg\r\nztm6gCVxlrMnwL5AAalkoV8Dwwyfckrwbf+LjCAlYS715EVjDcVFBPZqIZDg\r\nxlikmhfXtzU9WJcywEsoHNHonIk1ABhhF25AIKHMhwg8wUWMdu9/6WCqv0+N\r\n+MaLu1orV9S/vSine7NI+nPuCnbwphSPeT4HFhyKilvzI1AW89/oOXwdIFTz\r\nqJYyYNYhIkEpLElxC8Xco4L0VUv5j8ZlxkxYEhZK6uAPd2SlbQSBcwngSSQd\r\nN6ZI1CgdEc1pgQtOn2bciHZF2r8xykrIajI+1hmbasblVMNEAxth9DrHJWKH\r\nsGnL3kgH3kM0o8Q262pUVfQOdJE3WyZPYeE=\r\n=GwAP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2206131450.0_1655195205754_0.0993308718315673"},"_hasShrinkwrap":false},"1.2206071918.1":{"name":"@bentoproject/accordion","version":"1.2206071918.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.1"},"gitHead":"fb620756f1e66d99fa06cbc467207602e4aeafee","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2206071918.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-qqdgTjSyJo4C4KxHFAPa3gx/WCrtUEjLLU7ZjJYpFBxcg8ESnMCdoz+Ai5EGMfTd1TA8tKoQa76rVhWxvz9IRg==","shasum":"91b68e4319059f265d7d5189a4657de7d1d022e6","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2206071918.1.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZuj+KotyqyyiR/30yuNMBSnTVEbfO9kxrxIooAUscsAiA0abNsihGM4vHJAhCV1E41gRqfqJwKS9qEVUf8ManykQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqPz3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp66w//ehLdT/pX3yJjm6pPTarAQTnhVg8c/raphYADXjRQovenjbzX\r\nvycz/4adZIZWM+DOrDSIXi6yU8l9yBgCCjuASKxnz0J2YX5oLb8M9foLdil0\r\nrOZhTXfcMjPqTTJVlO6s2QjS7jhRnVKmns3onJzg69vfJNVhyGhFLz+W5tBe\r\nRCuh6Fg42eROzPEb+96FfPFEVnbUMnJIHoh0WUPwj0Ks9zf31Ql08C6+Db8j\r\n0M6TB9HNQgma+NIwsuEdOoBAhd7dUuw9SlEutMl1ROIzP85mCJo42YnhFzOr\r\nG8y6My4kPEY/QNMbkXauYPd1ZBB3Hwt1SjvS1a2rjFEIoDedf4Z61etULD8R\r\n6YpQxS+VNaqxUxHSnB7OlB7RWQmMYqoanBuJOzMhUBZ4iTyORhuXTZ9jsatM\r\n2o2mt6MNiiras9TGUjscHsHd9OxzLfr2s9u9/P5v124rUJz4e0HAyodQrjzU\r\nOueQDoO/WuKy2o1aATaTCSi0jK/pSL7WLqFCn1znsAuB/bjRpNFCAJp4gvMS\r\nu+K9W6P6efWwrp90EVo5AaWyVGTa59gI6Hbx8L5Duagf+fY9vwJMFSjNBVNu\r\nVRuZ8vwYpMp3yk4AGui634dH9h+pYQ2cDUT8j6GVGMeA+TK3MPYJQU66gZOP\r\nfP823APaI9jU+kfrjwgTFw4cvjd8Tbltumo=\r\n=twP6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2206071918.1_1655241975668_0.8409082650921218"},"_hasShrinkwrap":false},"1.2206162023.0":{"name":"@bentoproject/accordion","version":"1.2206162023.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206162023.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"15781b541aae254d04a1cc777016aa40759100cb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2206162023.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-h/qvb/eOaZYk6QU/AIqZOHeaTIF8TQzVvYntpncSL8ijRHP4H7rhShNvESAH2su5m+QcctwXk4IFJLcA8lOzRg==","shasum":"6150570d1b70cca3a8f10965b5c2510619d14ae9","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2206162023.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDn0wHNG9w0HzMD2ohyrWTXtfbLSLB81jAXMgtWEEmvlAiEAnZxA0JbZjATmveT25NpaC1oXneEKa+8geEhK30vpL1Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirDq4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3xw/+Luu+/US42ME0UcWt0oacTVKwO6uAXtDGD8NOFW/NYv4//sX7\r\nd9/oM1gOsBQMGjsHEtOOedsgxBTrtm9rtkoRoaO7sOOmovqQcxnfr6TAxiE1\r\ntjJ5ML153AccXdSz3IWLKMbyRYpIfX52KIlDaJaG2GuJ7xcFTIX0c+oGLD9u\r\nw2/KMtW4u2r+cS2ZNp0qvVib/0e+HGaPkuS56dTXCrLwZ/9mnHFUQBm+EqxS\r\nyJQ2yns8GgTnpYwrfRTrtON+fecpol1Bfdx2oJUYJreQesegKtNfllE4WIZt\r\nIVjhIdlF+GK+P8rQ3C33XcH30yYYjrbi4WU48DLAFCeGEA+KU0Td1Pt7+G1z\r\ngrutNevr4DCfDRU1+RiJH6nQeHk6Nk54E8MuDDGUqAbf2RMdGlJQxJKTck2P\r\n9Xr4jmRw+eF32VN8X03HfCZkezHNGe3eklIZrPgthALqplQoLVfI85yzojiY\r\niojxqjQ69avj/Fyxf/eTOHcoEVsdWSPS5mhuvOq7R3GzPwSuCiqRIItar4VC\r\n2uVF5+i0U3o4U6MJR7MnwzMs5ulKzDSs4sxXgwZG0NRSqmN7iA8wcx61YpRH\r\nmNzzaC+GXGFsN0PlEXpv6F/QtZEdGB/AtWTqZC12vwOtulHjSPka/v6y9H40\r\nvaBf2Uq5WWeWjpW0JY015q0shp/Q3CkZqLA=\r\n=Khmr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2206162023.0_1655454392377_0.397098637918746"},"_hasShrinkwrap":false},"1.2206221455.0":{"name":"@bentoproject/accordion","version":"1.2206221455.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206221455.0"},"gitHead":"0f6cdcebd462d3dcf580d8df0a7dfcdc02de9061","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2206221455.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-1aJuunNqe39YlTc0GEzlTHUYW2tLBx8UrVTy8gIPEarIB0F1xq655PUO1CrPIRt7nE8CvdmVRDXqFxlq3uLcjg==","shasum":"24ba124c727dcc5a3bb5a35640f46600e0390815","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2206221455.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5NDUENV8BVRDdKxQmDa5Lx2mmkEp0P1uDPr0i1dGvZAiAKAZqP8nLJoJFsqPbAX+UfvgBqUw9MWLBmuTYxSqt3cw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitCO1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrFw/+LllrvexzsB0LF4b/jTHBJ6a5XBevY77c6M+dhVb7Cef6O8VC\r\nVBpWNz2t23xlhv7CKcM+UMevRuVpNqPxWnQw+8f2sSOK1BaDS+UK/SItND80\r\nRAE10JFBfwARHOwmWizvFeN+NUO2yR59rm4ACrv4cYul5p6cZ2rdb6Vhewwt\r\nt0RmshPR0P1C4MrTKywtS+zqgd3nLJLbobz4g6eCJK7hKNfUuoTQXZkbAf+K\r\nr2EOXYRVWOlA1QpigRE4PdzHBAbZ4m20b3qstQv+Ve9uNmlxhmF4FINI6Eqj\r\nU59jPK04rv0T7kSFxhjuthXDKT+ksPbH5u7skwLTJ7HzLqzQ9aybVx7JhVkq\r\nyJdXWEH5n8MFg4O9uEys+B7l2j7yHUZOYSzU3ZD6UHr+/2vEdaHz77jaStQz\r\nWBDSUlphuTLL6pl50QOugih9VFutGDJ79dSrZcPcX0O7etkgPULmDvx21DIs\r\nVJ07JV2RkN9QYGyXqc3av0OcWkp8F/bqPcSH5GWnCdW2cuIKZFI2XAK7gzol\r\nO2CMFZiiS6EsnJlekTKopYcerFpXzryHAL2K767ct+uPTa/IK8BEo+vzmzuM\r\ngXh9jGJ+oik7VU7NURoQ3ctnJxXFk8JuVl+gfxtRiTuy+xueHaEvufaEENoE\r\nVo/XeBrobC1V3+AfIKa8vNMboLsJACELh/g=\r\n=rIWw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2206221455.0_1655972789618_0.37491250535600384"},"_hasShrinkwrap":false},"1.2206291614.0":{"name":"@bentoproject/accordion","version":"1.2206291614.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206291614.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"34fbeda57c3cc9d01ab3c39cf9618342ec840187","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2206291614.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Rb25sm5LhRf4EuF9uD0zxuCasEjP6o7WuH7Sz7AvMbPzFbkxc8qwxv74Xx1bjclu0prwSlIqsiM3xTjl9ibybA==","shasum":"85fa0b8da32322468b5f9bf881641603c7a4e218","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2206291614.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYfv96Yv9BjlQz5QBCDzusb2MQ96fAsn+am6sOkXKOZAIgDHzhza70z9WP/huxOB7Qt+YZpzaw9DNH/j3zUaf1VgE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivco3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPbA/+OlMcNaY8VibRPaUfL9Kc/Q452oID3DDgix8mBE2aWp7cy1rQ\r\nljnYnNdFV/EqCOobuM9FP62lHO76jI/AhB/JuYL8jIj2TC7XLwWK+VZJELZ5\r\n8lZOcsXF0Hn92mtWbJdzBejV6fpJIcsMEiTXsYVANZEv0x+Ld5qvvHw16eAy\r\nglXhSAqEwx3Y+cNyGKXbaKu0sn99SEXr7ElitpfPLdh9+b5h8uinSDFUJ1AN\r\nMfPb03xgFB5WQOagWyZADVvNbFwIrm7aybPYXAD+4HEOIun6P3L4LqyltDCu\r\nDehI9oqfGN5oIeqvflvxpnZOar+KfCUbv8uNDg9LU0l8W/GBgTuxGSEJl87x\r\n4yi8l0wst1rpprunGAoLqng5G2hIHnC44kXrIq7mY1o99+H68x3TnYz4AroD\r\nKZRDC0aTkwMBMlXUmxsaNNRNgIPR6ekCf2W18zG8exnOIvjU+pvNlhe1THpX\r\nxFnp4uR+HGAlFKHSJqwWVPRSpX6eOpahcx+0KCYsll0KdYlbyI1ZkskX7EB1\r\nhQN18ys6OoTxB+E7cDPnXT6GR6XHaFNHXo5wWB5BI2Y91KddvE5mlw9bA3KZ\r\nTtN1W4wiLVL0FFY8+GfGS6lKyS0BkECw8epw0/jGqjC0CZFp5pObNtuc/gEh\r\nCef2K+WiM6ULq3uAFtKYd+sZaG+pG82AETI=\r\n=8JmR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2206291614.0_1656605238982_0.7198218330429398"},"_hasShrinkwrap":false},"1.2207071723.0":{"name":"@bentoproject/accordion","version":"1.2207071723.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207071723.0"},"gitHead":"4ab5ca14023804a1af71c15bba775c5805e2085d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2207071723.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-jQtID29b5Q0dubR88Bfe3ZGTwTMtmPn3/8v8Fv/eYu0jjyWF4CnGTOiETmSD6eaAXibWAIWLyg+CMBmGQeUEcQ==","shasum":"b46f85bb28f984cb6044eb57ae5f9d79cf6a2f69","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2207071723.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuS1aR3aNgW3YyZRzIwU1DcEJl5BfJoFo9jmi1bxM9SAIhAPkI3F6GRgHjEs0UhEu2syZ/ldm5IzqBNeWLUHsWAdpx"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix+urACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6wBAAg264Xb540c7VFGGVWZfD7OJcDja95DPNNCeCh496wZuNr5YQ\r\n4uPS1WLDBKkENpT1EKwieuFeQL96kKGGLVDNLa2iUsnlCXmJWB3rrFTGPMYB\r\n/adnfdAZ4znxq8WGG/iFpgVBB6Kn7YPfxgsfDHivycIhdcy+9MTaLC598hxY\r\nxpKO8Chl/1GdtNOM1SMIekDFmmbzphd5f6yOCBa1D2DF2+V7+5QkALt2vepJ\r\ncX0AMvlOruNFe2/ZM23IyxXWd8bNIR3o1dCzuWNQ8G6rfbZccFvY1JLXD8sl\r\nFRUZUxKJ3FnFF4R0LiIp4lAmV4NsHIl3/RucuaFB5xYenU4c1a1L9TBjoDEC\r\nULY/IH0BdoAiVke9oMtrxjNXfzPZU/ysxHDjxXWRFzK4qzFbQwdduslaKFA7\r\nnOsrSPcegCq5P1gBVA+zkkwwvF4BZE5GwwC6yZTUOB/GcqaRJE1R4LWh5ruv\r\nAfMb5rDLEd9X0luCfWU3P6rqQVUqEPpwLvPrvzh/y5QiICnA+J2wj9RVv15W\r\n9lMZH6UME5AKHnrbQqjN5rksXpx8UgW9MEROV29Rg2/C/XbWMr12GjHnC1lO\r\ncpR/hfKZ/6RIeEtL6u4oFTRUMibRmFoNTjdmiu2/yKecb9mlmGNc5xhMrUTJ\r\nXNtSjkUCht5izMaNjOmc3SbLAegyGIbBIxU=\r\n=Po1Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2207071723.0_1657269163251_0.8210835372444287"},"_hasShrinkwrap":false},"1.2207181727.0":{"name":"@bentoproject/accordion","version":"1.2207181727.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207181727.0"},"gitHead":"78802d83c6c9791cd4400e761bf22f9909218a58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2207181727.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-PU2/abUjH3sj06D1yCV74pxOtVtdEZUfGm/Xzbfl4wW4wWTX8WLLAPAy0lFyyKClf60y1h0HEKecOp8PS3MtXw==","shasum":"1ec5bdc16caa4326d9472fe78eb7b65870606130","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2207181727.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8smtTBPcGe89xGulB98nvgDDyws6NhuALq31lfDKd6wIgSxPw2uYQXYJWj/7fl+OJHFVWf+Gz4uy0t8uE3hF3+yk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1mp4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWtg//ePM64QQZjFGWvno8iHuHxvF8vkfb+mCNNLw4Yx0qa1Z1js+C\r\ne1v2Vb5V6bPdrxcmDA4X6iUkZZNnKA71CQsXbsstbjk0ckHUs5mvh4sFKXSR\r\nuwLHp5xtijknOdbNmjzvjj8qmQS6A86YikonzRLy4eR564rHrtOOldur7jWc\r\nSwJrV/CO9JO/zU8QHT+h77ldIWp+L43UtPeKv1U56GkfO2VqL5tIaVk7xz5w\r\nL+gKRLca3fVDID9p2nBUx3WIhdigJsjAXexdGjpiJ8zj3GY2tFHG5QJydQYE\r\n8Toq9ATw/nqgqwqV+2O5x+YjwFyv+JYjp76jdjTl/TEQNNgI1aTQvvdin2Na\r\nCHcaTKTkUn/9QyGfYObmatmWpdjncmwWI2ZdefDZcqn930kbs+lhL4nnVIUr\r\n1W5Holm/PyPraay4NE39AwY+i6zcj4oebfHlVqXGuArC/ZyECumKAXx7s82/\r\nQxXY6bHG3faGxEVujt1tdI9YSfbmlSSraEhN9blk2mV15JyzUsVXTB1Fo1aW\r\nBp0sqCkPOvVZauJrbJjsgq7U8Dn9QX04dfva5lcFl2+9/k5TXjphxoPNhkqy\r\n6Ldu5nPmqjoU09anDGc/1yFOo7XxURdpFTPmC2OclLS70EmgXxhAi5AmpJMb\r\nQtUI7uAvDCjj73Un0HMSKf7r8UTBmfwvbA8=\r\n=nBLo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2207181727.0_1658219128035_0.15244116001137664"},"_hasShrinkwrap":false},"1.2207201724.0":{"name":"@bentoproject/accordion","version":"1.2207201724.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207201724.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"62d86212e783d34fd2dfa8bd02ffb0e447c0538b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2207201724.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-gJi/5LkT9wOuDFRIYBtVFVCR1KnR0RWnLs0zzVhC917Iy7OZvLf2zZz0ndMxbEth4l4VyAvgpEmkE5m6SfC3uA==","shasum":"dc7e2655e41e6921edb641170515cb30f620f5b8","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2207201724.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAhlvoTcoJPU5JYPMyNc7z8R0kdSLT+QWhNvbddcdTj3AiAmtFq2Q3o9kCXnBDa+keLnWiUPCm8jW5vX2gYAYqOD2A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Q2PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpltw/9FEzMpxdx6ZHPAziVicKFz9rIFCRpDRoCuFwdQVNMICL9gmSi\r\nlCwIZuSkGnHYCdis5yjFH9TdlHQGvWXPMAQvwWrsabIa7TM5XU4KZH//YSFU\r\nMMIK2wuuz6+7wN7Zd87z4rpYpXUvY2syjUX1O/tkuZ4/VAgNyGFUlp0H3bjw\r\nGUE1vKtpt3/v05WoGM8xC2GClf6f69Z/9Rxz6CeJSkZ0rsVUmBl3rPipRZZ3\r\neeifuwNjeSl41IT64MY06LFAcR+FNcUDRAzQF/i3FcuwW6A+YxngfzOzeTP6\r\nzKwxClokJ0bDawHSWdSrTOC2JDRqzeaeM4GsnwFKLXVU4kF5kSKJhyM/TQ4e\r\nXjIAoWfqvw2Ar5gka7V41SExExPC4ai+tum5RNvnksOLMszXPzjrUb0nToWj\r\nRDarSJfcrY5UdjqTSOEK5fNAF2xseQKbompfjikzML09UHjoJwnryswNriWe\r\nXPVNFn0qBpmqzNaUrRMKipjp0ePaRbcT1uCjbm8VUuON4QMX4Iu2bTfScMLt\r\nvq7607YMFzTl7Euh0Ux8++GbrCGGxas//w/+B+COngK7tP3uRzIYPTPibrNo\r\nABYFAA2NLCbyheTsF+VWwzmMeEpDMJbtXlKsZcC7tzNzWW8XNHMUNIAhRR8g\r\n59zp5I6+8A2MW1tuybDLPphxMoxcLIxAQi8=\r\n=2w0k\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2207201724.0_1658391951137_0.6328175491057899"},"_hasShrinkwrap":false},"1.2207221643.0":{"name":"@bentoproject/accordion","version":"1.2207221643.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207221643.0"},"gitHead":"83270c82c0130eff7988664c86a7482098f9477e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2207221643.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-w7SxjmcHEFSUTaVKUBgVegshZkbP7fGptU7/lK1pVSE0Uzv8Q0qTAqopcz5ZwmsRhlXUvKpSx0lsQ9qs04Uq9Q==","shasum":"f8f785fb90a64c743a2d9375b1c8756295f5f7a1","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2207221643.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFCT41rD2/g1uhawo9oOvGwJHA4kz3yeiKn0JE41DdwaAiB/+e4zewP/a5oPcygFXbNw/chIgZsExNXQOVX0kuzmuA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi27CEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8lw//UiUDA4HTiPsyHzrfTq4QqFhL2mS9n5vnHNLEq7cDWc27uPKE\r\ncm6zNcKj5nEb1UJpsprxmQoXU6PJN0tyWYnRxymeghBhGOFPtcb2hx3WmcvL\r\nAz9/LsQm4Z+0PIe2MvoImDLvgrtxnA8ki+qYs1iKkWIs7oMWZ3ueNcwXRk71\r\nQH9wJDmM9pE2E+ERhpBAvqYJGaQNhjc+cH8E17SgSqbot1dutUBFISPoGEtc\r\nKVVTixzjXf1DRvT9mGWRj3Mx1Lu8X18YYtgooniZMw4A+qvr8EknuwUTS+Vz\r\n2q55APStwKDKteuMSod6qTYe7+jF0PBvES527ZMeaiishsndTX7pLohECHrk\r\nl4NLMQcv8pEnHgLn86Dnpt97U9NmAy4VPqEUu2poQGsHTw5+zFzG4e6MGHlp\r\nyXcxvnEWQN8X5QtlxEslhW6HlSi1UaMUpr27djf8nxUZjPtqkN+r9wlsBq2c\r\nKae9NlrR4CXQjSttR0xgDImCzBsLIPg6wr/mB0S4i/tcm3CKyyRFy+YIoHhj\r\nSEmTE2jNOA+MLWrHiDYJvFO4SJVH715zzMJFmWRAMygSF29yt9Y68fEqUyxN\r\n8G6wXiykPFQiC77MJtJ9fBDm9DyaI75Q2Nnxqej3vQ+0c+BhLoD0O0svqMAB\r\n7TWeMzYr6QWBuifmAOw/rOFWVYzeCkUz9Kk=\r\n=J6VB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2207221643.0_1658564740593_0.29681556341445403"},"_hasShrinkwrap":false},"1.2207261725.0":{"name":"@bentoproject/accordion","version":"1.2207261725.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207261725.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"b73520d61dc1a279ec10d2a27f58891e2e2d5d93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2207261725.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-wGAShIHBaedEw+Js85dyX0inIHE7xYlJ8roRX4ugiQLDiv2pYlEkNwIZw2fT2ZqMWkbnOC2Wyq5iEYUeul1VlA==","shasum":"d8c14ef65e4d3d5d881d8a2d742cbdcb558a89d2","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2207261725.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaAanhEBvWFZic48gVeKkRUJ9wT1N0lIP81j+Tk+yEEwIhAIkKVh2hAbUM15WWOjF+PXj2x092Z1mG9PvmSDnoI4pK"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4PZhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8wQ//bVdo7/nUCiU+LBjlhcrCwr90caPDuSvU4F4zMG1YRvQftnEy\r\n4MDd32V9gDuBr4GLPaTp+6flkwhOGnnbK3IT2er4mXCVJiuR2Odo8Y7qPeP3\r\n18K17K6fUDJxe1GUJxQ0n1CAAJcuoYyruYtnrD4NLz4bpY6DAOzOGtQNJQ3R\r\n61j5Mxn1plUXZe8fyvxGmpqJJP8KXqmi+hhgZTGSe/K2syIsiTSoZAbatC0b\r\ntx1s7wJOge2+nJSa+rtP1shRs1r89e47mZSYRUBgSX/AcEs8vxzWk7e+7CXG\r\nWizWH7w29epm2bjlBCKISstow0ko4ATBCnbaflZ+h9mWoxmMWaLDUWf4ODoC\r\nZAlZYVWjq3LFFkPw5O6Drj1QPkU0JTirOhw6PNnQPQYPKjYwZa1BH7YDyXti\r\nTaD8hLy4rJqmOm8KINDMvock4cSV4FPK6E/42RXtz2MW9hv0w5qsPfhTSErj\r\nPjeDc/1HLIkXliZyYxKvEpiwvxx4XKtc3BRsy2IBac/ivCWfyHWSLqEZ7oqA\r\nZYvmXDAL4cEWseFb9WklT4f0YrXaCx82libXDdWG++cWnOMUPR0cO7NmHg5U\r\n9i3iGYYkAo3E2fH+dy2ZTxtDdZLQzSRNJlB8dvfl/orhjOMihg3QpuVKbYAW\r\nd1TffD+2xmzkaGCKxpDObk6GzCLqWfrIKMw=\r\n=83cW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2207261725.0_1658910305526_0.6979895009148405"},"_hasShrinkwrap":false},"1.2207281718.0":{"name":"@bentoproject/accordion","version":"1.2207281718.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"5e3f3eee6148e0ebb57aabc48ef987e9b5528611","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2207281718.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-keSay2IztwiSq69y4C7Wu5hYtWDNCHd+gaSLYj2WiVEsxgo96xj+b6tdYWyuF2uDr/2F3GltaNCHoC3/QT6cRw==","shasum":"ffe0bfe9e0dc63367759bb5d0f711524a4ed3491","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2207281718.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqiR3Cs1dHxFW/XCljbip01JGiRhVuSoKHuLJl8Zf72AiEAgSZMtmJZBYdiB/R0QyTE0/NIhJdtykYc+UGfnXbUsDU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi45oTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEGBAAhWJUY6m1iS4F4fu0a+kC9lEaEFkEEpZid07M0z+0hn9cI2yl\r\nM1VHVqqL2ctjh0Mssqtg1XrsjrmR9jtCVk436i68kM6cMk+P3G9gSRs4kBAh\r\nid+LqQFhxMuwL39k6JjqEJurdQEMkBO0hD9I2Wc4tR6oON272eZE/tlT8g3R\r\nCse5lpLmDpuZv7kxYfcqOETFMU29jWZI9aSOBrE5UyVSp9rB/3U05SoOTHod\r\nYumEpccZZJEAa+amiDAYgMb7X+FM4K4svX1EBxsx8Uc7JYrcHXOgqAALgoZD\r\nLMFB6+wMrbqP+BGofoAQGN2y3d2trg8LVOgbctM4sUwy1dZM/dbDJ4aUziUE\r\nki/R/2GdzyXg7d9nVYtzqMekI6elzkDcnzzkELQ88ZJJVnk3+w6GvdWLMyUo\r\nRA7hRcZPPwwDNzzVKPYTiQYeW3+WPBYmcBBklHDXtrqX+nPrdkO0kjXT2K+0\r\nbGSMG7fVV42uz96g0RCZgJ/RQZdptYXexbThHx0a1Fw67CHh1/o+HHv9zuyG\r\n1rSCvYgc/hO+Jt6AavEteKL5lMAMjRGgUSfQrLsJjJmzd0nsYst/oLd6/kbi\r\nhgXctS7WnUgsNdZtm5DkF5vpCcB43TSE2Z9uZagnehQrWjgxYS2FvM8hCv3U\r\nZVdJqNCjijjs21tSiLaJaibSurlEom8W5Gs=\r\n=2BbF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2207281718.0_1659083283099_0.3127317104863476"},"_hasShrinkwrap":false},"1.2208021808.0":{"name":"@bentoproject/accordion","version":"1.2208021808.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208021808.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"b82b832cae23ff854449af280f1b02f4dfeb99f4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208021808.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-BcA2iD+6zmyNTiu216VjwAdpkf5oaeEuYqu2hdYv2DZXpWO93FrYJ3fe52xtA4/CYJmVD26Rr80G3n1Xb35JUg==","shasum":"2160bcc29ba8d39b284d6f0997664fb9aee89cc8","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208021808.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhWDYpD0fV4sty97ihpFKKid0DsDN9csij0HojkElP7AiBIWTMk+T00sQaBrvZI1hAVmWu0q/OBgr6TGEKMRsVg/Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6jFZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwyRAAifzNV6tt80jbL9a/H7OZ1jHcVwIBEh9AcyzUxmqXcZ6c4eTM\r\nx9MkMrVOSk5UUNw5G3cCMuuUgEz0hf8PmHMGJg+xGgQ7/0jHDYDiRMYMurKq\r\nstazuncYcwuU27uDRYl7d4m/Sualx/gYfpQrx69ArktUtFiw1Sw0AQf7X6vg\r\nrVW6y2yNZ1h9N7cAPs/Hoj4dwKNqYy2pBzCkhq2BoIOEyp0TdihFfL1R4gfb\r\n1f1ei2+vzSziYUdA5NZjFzpdhs9dMt4nqbiLXNziPYTox6os3mEZK29Td9Ys\r\nFGo+XIXaYddn7yKUgqoY4jcu/4OmXi7xRF5CxkFa594sFJ+DVt6KQOgEofcE\r\ngx23lUIw2rJ9pPDqwMecdma/zZ/SM9a9hTyTLPPug69qPmwhPsOjDwW/ASll\r\n2fRTycVXNJk3pWQR5RFYkkLlVfoh4/GK+Q0QCJ6Q9VyAFQv1sFI821xdUa1t\r\nyCMSDL++F1omJRajhGEe7CMuYOUVMvokWF8FugYhT4F1NO4u8f57H9tKngfg\r\noE1IUGE6u4rwxWodWBrjXHgEZ9ElbLTN7uSF+4dVNhMvPm50VMxpNggrButU\r\njyQq/dnQy3NEHTc13Rae2MsddW4B57dgAGYqRdnv9lk5ofnI6ZgSf69qiu40\r\nbCfrFarhlNaE3dAlTiOZ+DgizluVIoA+jpA=\r\n=btwd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208021808.0_1659515225162_0.3562200682577774"},"_hasShrinkwrap":false},"1.2208042017.0":{"name":"@bentoproject/accordion","version":"1.2208042017.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208042017.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"598aa15d3922507a106666aca29a90334c7b2c05","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208042017.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-1BtdVUPYo0IsOu7BlzNR88DKjjKsWC4Jo8qOm4cygbL8pLd0mKiXrsn0XJVLsyScCF5eTZzKzIhu+bDNus8l2Q==","shasum":"eb3072392f918188a3304130375319321a5bfb33","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208042017.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJI7WAF6n8aEd1TcPeX+GVvz5YJw8cpIloV5RlPMx9IAiEA2aUNrUgslGQXQlocjxbzi+kOji2m7yR6MNRAW8vEBK0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7NSRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3+A/5AefiCAyPhGrDM21ve/b7CLuhFtQ5LRIrhhJY9bMqgIr4Czpq\r\nLJroccNdUwJ+yE0prZmAIJ2IHtSmiCKj8gMo6ksq7OuXdqee8l/RQv4Hy5In\r\nquj3tbiP1Ba5h8XCWDqpC2xjcfMLzNAe+/IVu30527LW45G/p5EMEfwXaAIq\r\nD3LkJW1lgw0rIv/ZTxMSnWKFH0hqNfHvd01rEvGSsplkbvovwoeCpL0pnrrh\r\nKqP3rQjsymcVrBvaHmNmSqyB7qpQ2Fu/vTAPlNgUer0AbCXFki9ovDsUYuMo\r\n217A9mpnJE0LRpPv1ITEpc6LJotFm77ox9GnWFTM6N8r5jt37suKhPBlc+qM\r\nxZZf0wLEoZFAwic831D8TXwRrCyg6pAc537IHoNeByIoeMKT1ZQhH8CUfjxF\r\nF2lPJwwpoXKbWab63s1uvL6ustXx6pZwMReoOnkeXmLND3DMqGsATAIkSPqQ\r\nso6a4sqebT291MQ6y4tZFKt2eDbbXnQdxZVRh6amGNa1aAffRbAQfdXKDJk9\r\n0fSnloJMRfBafnuvLnB/V8S9CFUSMGVUsBCC3pgVdDMKSlqzN/YkJtixqoeV\r\nuLvenxmhwc34vp0nofy7NjFC9zTYmbUJEflr3owCERDefNWbPr2/waf7O0k+\r\nmgwbXZ/dT3hMDVbO2z2pA1MGzG1F5vz0Hl0=\r\n=68PY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208042017.0_1659688081445_0.2685304140923246"},"_hasShrinkwrap":false},"1.2208051912.0":{"name":"@bentoproject/accordion","version":"1.2208051912.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"5f50e49dee3435f3a242126437de7cc8263c2ea8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208051912.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-J9xZPn9+D1Xy79dCU0XdJNl5cBPcjutZjq2P9CcIbD8+cUlhB7AmslUBHLzDO/hj4lkP2s+39UPTmbKkBuwU6Q==","shasum":"38ec1d4c9cc02801e1f6dac6c41c844376ac3918","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208051912.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlnbVi5b2wiK3bbN64zrfdM4If7QsPDJdKNmrbDdQ21AiAtDUgKXR9FV5zmqdXm40GXuBoIXW6ATHJSrsuH5Nzfhg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7iXoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG0w//QVPb1mg5qd4mDyMdOcrhP/n8RBkuu0I974PQSI8wTxnRupuz\r\nxSMOFuwPkKTDdCLa6MTgRUlV1brnnJ0lSTcEJqb7FyjLXot68kzW+D6FjALD\r\nEx1DY291gmSJIpfeynoi/nuKOVq14/p8oEUvB4DbYlxc0JDawvRvPX0IKtXu\r\n5MIgEis+Kr+YCZzY89ATemW7NXD4KzOfhcE191CF70ZmDKHLgzVSGdF98aFw\r\nRgj3g/YQTZ0WodN3CX8lBGnm6EhS9iFp/h1G03QNiFQErKdN3qmWuvzJe/nz\r\nSHHMPSKE1D0By5DV8+08XwKVuyVfOD3fjobLtK9riEPHKcjYG9+xSYPbIQP+\r\nx0SwgwoQQ0+F/YNMT7uMnzHIC7H+DCKk6Yf0aCENvJhF0RQ+1SHUvJRtc1Rm\r\nLOlyFl7tXI5PoQR2Ah2V37CH6sTtH8CXWIQpiIFoHdOWRb2J+9UFr59PRiaX\r\nChj/ToWAzR6KsTy4Il/RtKPZ1DB+Ef0BFRhHxYpKXVoTMZm2VKIRuPO3ZZ4P\r\nUTYUd7bbEVO13qUW4fRHWMMSDBrS2rZOoG55vFrP/4np0cde/Thgsb6NJ91o\r\n+1utEIJdgTR6rZc8KOmWzBkC7JJb/OYE1I92Fh0t64K4Nv0p8h4/lpafdp87\r\ncYxCJDQpIG1Pc+FfwWHwYnf0r7EBiLpi7uY=\r\n=sVaf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208051912.0_1659774440681_0.6178233917626399"},"_hasShrinkwrap":false},"1.2208081650.0":{"name":"@bentoproject/accordion","version":"1.2208081650.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208081650.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"beb9a33429ef933995a664a1aa534cf7ac0984f5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208081650.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-uGt7G901wHw0n9Ipv+5lVjC2ds/1HDb3YlNbj8qCXmvzHSMTddZ87y9InWlipXpn7BmHMHVvO9tJ12POnsYZUw==","shasum":"7e175f69088434d7eee09c08ed50238ca082b23b","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208081650.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmU97694djlT55YEwnlSZ35eICvjUm1ytmzkK+moc0AQIgJNNPpwkB1RFATrsOSp+3jQpVRR5QoCyN3GjhFOvbrdI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ho/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNwA/+JtxOxHMLKubR1Uj1zAhkr4YEdxjdVhMgEMv5NrMKHLer/buJ\r\n+2dD+2yRGVF5o8YP/eNHHf+K4PTLVHPnE+HW8NnwyiT31jw746JGKcoE4SNF\r\n3l6o9cXKdGnZ/joKiCk1yOu9Zkr/pnVSbF8UFp0pQcEl1MCPQI98vMJCG+ww\r\n5banQncePIsmmAjZGvP1Px55pMhHxsB/b9Gswhy0GPjMXZRZhUFRD19kdQOW\r\nyKMuZNushWsHKtslhEWvbfz0YTWLQzkKvi7kcRSFJflia1yUiRdu3+RrBCYR\r\n2tApmh//pDZK5RmF+eE8qJtqsW2UpLKJlcEjKLcxdg5IwAf38GdsbjgFsyp3\r\nCEj1fjHCa5bojJGdEm1tm1OCC4T+NStz8//Vfgw9aXCsEfGnVZV2UCT1+SXX\r\n3qugH/WMa3sY3Jl6yH5YeNZFDTI3zPvkGBQueCS1DzT4t9bvJOtLVsnkxNfY\r\nAlTeIgB+K3xJthgR86ZU9pGZn6+QPRPzxlmbCpp4pSpVcwOTLo1+nAQSkM+y\r\nETYzrDTy6FsJ4YPYKIUHlhw+O/+c9IKcrg09yvdq4npgajHWSJCXfgW+1UP6\r\n5ibuL1WjGW8yVY8JXBKrjatcRlxrOrTCUgSFmHuZbs11FKYeMLcYsW/oxft4\r\nqCV4vIoAUjNeOPRJ61NGI9Jdv7DdrJVpGH8=\r\n=sE1O\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208081650.0_1660033599051_0.15338689284833107"},"_hasShrinkwrap":false},"1.2208092047.0":{"name":"@bentoproject/accordion","version":"1.2208092047.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208092047.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"5147b5f8b54805bbea52be75a64d125a06f88aea","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208092047.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-7npHXgpLu74Kx8B5GkOChGjx9V07IJ/dGDZsSWFfJX8CxikXpp7O8q3DnwpU5246s6ivZRzll/jg46p/acv9uA==","shasum":"5e947b6a53ea49c8cfef6bd31d9f4da5f880a43d","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208092047.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEN197e43SeyaSmN66sxNG6uPlpn8dV39X+NylanWWOUAiEAp2+prn80E3ddxuTHutVMBT6gVAWPb3EKJH5ROmUhRZs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi82u7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMwQ/7BTJqKo3g/lR0k5BlIv/lqa30WM3ZXTSzEu8Tv+0j7eehw/H0\r\nJ+jriWAEqvj+4SYNMw9OhaWteMXJzEA3xu6i1yN/aevGGucd2XB0DnLiqeX+\r\n+3vMXyCjSQgpn69IZ/IqF0DsucbcWch5F1766zWNC9BlYqcW2JvwLOieVHTy\r\n855k7YXYDzm6i/WXvLpVTPqDCoLQLvqSrjv6i2bTjgvznVA4jKw6bzvQOhsd\r\nShUWFqa0vQ9fVyUn80yiZj9xDhGySfwIY41DosXDBXF5dXXJKxHD81c401l5\r\nGYuDjHfzvT8mybWsq0cNco+dbahIiewGgj2mrQlKeYsrHAoKUAbW66IEIXhb\r\nkTjFWzX+3FFsS1RXD3rBS9E6T1HF8bcuu8NARqiEIXtQSqDb6KZKbaOqOcbJ\r\nz2CO8CxRFgMRMtHnbXl5v6RTR0gSSnZPVQ1gjCwwHh5HhYout3F7vEJBWig8\r\nQEQqEgN9+8enZnt3TO6oqUOGzZGSuh0k+lGPAZ20S+P+Wznh8VBXhmJFebmx\r\nezXKVRiR1Lq+cMCNIjk9oJP4jZeHwxmvhLdKw/9pjkbkGfwNAqvIFDozD3px\r\nW3BUpElr4lqxMlRuCS+rzHKsDeRPAAdHeuQZbzDDq2IHE5gzh7HgkyXfDw1S\r\nUnONXXGn0piimlwJ+KnkVFO/+A8YWc8zgWM=\r\n=RXEQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208092047.0_1660119995727_0.6499474484763557"},"_hasShrinkwrap":false},"1.2207281718.1":{"name":"@bentoproject/accordion","version":"1.2207281718.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.1"},"gitHead":"b2cc07c9f0ea3633ed63866b9243ad0bc964dfe1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2207281718.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-9bNCfj8YtYAsT+bv4zYFdeFPZ5uSSFT+mt/TLyj75QzrU0D1lfkCa7EC/mrCbOuDhETeSmXOZb/IhFI6mBGDFA==","shasum":"f21a489a60b24dc872c256224e7c34ed9c326dfd","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2207281718.1.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCptjPsnG2l3YatmVy27I8QpXCTPAfXmrnHVJTlk/T5rgIhANuerYXadSa2S590v/UDxMthjS/IoW3+48xxhj0gi5w/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8+OZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8Bw/8CuuSs+SdNnGM4JZdHqzLVKMgeqqAp1R5gg+BD8Xl4eiL5mGQ\r\nuyLsLAYlx23qeHpzXFU5Vi66mw9Knl2luKaBN3iFXQ6DTBVv4XxRlLaixhkY\r\nHx2ivWW283jxgGF5/xVOI8O28kzbMfk8xXX/sBYXLrW9Qse4BA5CWRyi6hfN\r\nOLeY8lq2r/elPex4cFYLHjGt9xcAS25lA9g9tHIFOz7GDvOT7Lb7aPWGlabl\r\n5YZw8J3k7JjWfQRFXG0gSmS8fnQsSx5pJqOuePMvArSMyxp3WuTmcTpIN6H2\r\ntH7ki6DhTwx4C0Rgz9jJ/s0njgWOm4jzw4Q7jvbchfcrTSmdK/TSdBE4UN6a\r\naEM6xWSZeb+B0tF5Fe5e9RbAm7JA6Sbfe4W3thJSy61ZqhWwVsALWWu7AX2R\r\n1Ok1sXkH5HzlOFbuKVpRV3w8xGeMEBiGz2sLI4jwBznDf2/WuFZmlBfAUwD/\r\nI55hjmwo/yK14YzXk1SBA3/AJDTnJcGpEXCV6RhedGgFK9gZ2F1/SYvYUOYN\r\nw6v8OPi8JrrcigbCEUOsQT26uRIPwsLEVkjNlZ5beZ2jQBB5gAp0whCu4lEq\r\nvld0lNzSuTqJHfoCwak2qVNqVkRqJ67keSkJbbN8j+Oz719cPo+qb5JSASnz\r\n+ALdF1+NsUa8zThHl97kfLokTInM05N697s=\r\n=yxJL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2207281718.1_1660150681583_0.005209711991078558"},"_hasShrinkwrap":false},"1.2207281718.2":{"name":"@bentoproject/accordion","version":"1.2207281718.2","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.2"},"gitHead":"b2cc07c9f0ea3633ed63866b9243ad0bc964dfe1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2207281718.2","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-0AFan4IscL1AF5+qxzStVY5vmvLTE5s07y8baKQu9XXFhnuaElLooebKWncbmdmC0NLGXdrN+bP/4hQ4ZbPURQ==","shasum":"1924560448c15d3b204eb9c218d6f6b5aee47d62","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2207281718.2.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPgpXDoGI12a9pD+fSAsBcLKdE7+C55qJ62LI/64kqPwIhALvUM00Zz3C0oZ0hZCPRMrQGps6WAuV2BjReqkYhbn78"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8/WhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCBA//bRcdh+2OykXaRc4NBL5dgOGM1YG66+GwmfG2K851zJidIfMG\r\nIAOvWizxO71jPJKrMsHvqgufRg7EmhEpO1azmzTayfmeOjOOUr6Vsk0zWrhY\r\nD1S5HhO7FZJqldRNOaIpEpMPOpwaMK81OUdTvRA7i8hQCpBL0GAy7op7yPTv\r\nhaDRZT0DiJTHn93PhF4vScmC98vRAd8uwh6nhnjbK4rC4vWMI5dp+agavn6m\r\ncZVr5sXS07I1zUVEK2S2aKCNQ9uwTmJxx8T1eVgO37TGwJ3YQM0Fty2e4u4u\r\nwCjmx7hRKg7q6QYFB8KFJVKJcKY3/Yz8yxforeoWSEchtMlBQx3qZTVTWXB5\r\nlm2fxssx29EgdaOEA1BR9xRpP2gYHNBHIlfvnkPvDLVYZrzGkI00G4l2WAfp\r\n2PpdJjuJ2AETomDv35al7yBsLGzMEOfb+3dLl+OpUmoESXIC63GybMITsK6y\r\nGCDTPvJlMSYI8nWSNrwnQ9q79a1k3IjE+ULavam6eFzf3VCbKVZx3dALbYQS\r\nd144f4MCEcQ6TLNuLcY2XdpX/1EPMBhWLnts0/cigkj0/7U5l4wKRQwVApE6\r\nrxK8D2ZVmqgUv8RGbBrXQM0VNEzGo2TU3E73fD7k/YwLeMxZtXp6/vAOqnhy\r\nIpyipW85atQyF5ykhvXbVJkxEVECitrwVKU=\r\n=Fu2k\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2207281718.2_1660155297340_0.5764671109522947"},"_hasShrinkwrap":false},"1.2208112015.0":{"name":"@bentoproject/accordion","version":"1.2208112015.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208112015.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"83d345ea27d61c78ced5f68848c4f342e947fab2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208112015.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-tHpSfDr5XKMsdSjFHie/s8veaiBhKgak9IRTD1OmtDPLg6/N8WhTl7i+SSk/xNPy/SxTzFzwx/0JNOI0Y8H48w==","shasum":"88a5f1e3c1e92d10d24002954f6589cde38a778d","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208112015.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH7nuwRsquw0k22mI6OacM8vCkhHYZ2Uv8mUXE958namAiA1wHlDztgOydhJwB1Oa9SX+TzWFRQNadGsl4rcLVFCyg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9g70ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0gg//YSsC9WIfgXm0PEn5FI5bE43W0dawpq7NTXI30iILi+HxtKI1\r\nHUMc2iOgxGH9NNJKUlbQt4hx7tMDqftNqejlXAqJW0o3LLoAavtScd0jQHqZ\r\n9fAVSwlqaj7EpeNSZaskpInqHHT9vL7YUNZ8alGLoQLd/pjcIREZw6+6Itvs\r\nie/zHnka29a2N76pRrF/ic7+rU78xmiefw1TDSuxmS0zMnNavwkyP0lunk9e\r\narSPkd9Dw/v8+Yvi80PlwX35oeX5V39cMU5RYqCNI6nRB9vGHttsDT9LhS8k\r\nLTFdeoZBU7j6nYZnx3cCrOrPOIoaVmxuT+Iqh1HDTnhgVOXRGh3pwoBTphbM\r\n8KgSNfrTTTGtPJx1TtnxU1Nxan4ov9aKE5YZ1fzJBVaXOwangdfORjVqgGOh\r\nRfghzQpeBY9M1oilapqL3AR3suDFXIhifcFC8Ji+rv/yQHLO2lbqvDkJr0iv\r\n6RZGT9f3lWReqrnXIyH2erNj5jo6w3UTXyrDhiNKLQf62w0uzwN5WxJB0wyd\r\nuXOogRc6YTpWIzj82LzPInZZJoyY7+XWDj06yxG8A5xcYmyl8SMUWyHvEp6O\r\ngOjCV+kaYNVLm/8HcDgGBTimle5kcq0L5dlgsmcHWN2H4RCfg3wf4AW5XKfB\r\nzZcARuk231ND5fymmITTDO/DEFPdy/2MKO0=\r\n=Jtnw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208112015.0_1660292851943_0.9096625800847291"},"_hasShrinkwrap":false},"1.2208121708.0":{"name":"@bentoproject/accordion","version":"1.2208121708.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208121708.0"},"gitHead":"c9c6de085436b10c2fcf8e6c10541d6d2658af93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208121708.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-r72XaCU+tHBPOFtyZfnYds5bvUmK56DVrp/hJ8pQ/o0pniPCQTsFxdBBk68yZSYUanyoZ6Lukjbtwkyn1pSbUA==","shasum":"db32b48564817fbf14da433be5ad663f83af1752","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208121708.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHC+Mws1jo0/HI32XcDlYF5hJbZ6ToqM36+CNG9ITPegIhALHABHl7FtYiwd1o0tZ1P3Xq5rADkXbeQjZGcKG42GF+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92AWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo92RAAlMAAxTAuaHajEYq9XtWDaskP05RIWqHtt1HD5doYQCmrFIBm\r\ntZV1kzi/b0CATBGnJQpU9qiab4A6Rfd9ZnEkmxAx9bMrBS+4XDMGavI1SBfA\r\nkppt5taX9Cf1Ii8+414SXx3I/MPW+9SZ8BZ+rvHxd9u+JovmWQ4WGlMSRKHk\r\nf7yBseykgl7h2sUtyNGUjkmSC5vgrYNB0Qcow0OwP3UPGtcOJaRMB7SB8Xz1\r\nr+1ThFWIsGpVOheF4n9UQfhuX9Bec7Z2Zt8f44zEycUd6CQAnQfLoGel04F8\r\nwNaPXapX7Osjzz4vtg8KNoXs+epcdXKlf551lpu9D5/VQIxtGlCsp+Gd/8ue\r\n/dTAyDohP72C7Qurc0K+5lqYzprupEdunRsh1vAdEXqVDOCHpSpNvw0z9oUL\r\nqB8MIgGU1Pka7w+5vYCkmTClb5UjZHu/hgLUI9VNwZoTiQ1f1SP6akp/YiUQ\r\nB6j45WcjcfJVtIHWlDigw6/m8V/jcEOyg2JG6MgAp4r/Z56g+Vf5qW2RNaKI\r\nKkD+H3bJVujyHF9MqKHPEQX8t60XN9SFsjpsyy0lWh66Ltg5l2HZomTFDYqq\r\n8OVuiPe0TSdhegTjk58uGA1BnSkijL5Ux9mWfFtuZC1NNosKDj2xN2ZQ3/rc\r\nmEBx7fpTmKCbEiS+T0KEloRPp53/lWa723U=\r\n=3A3w\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208121708.0_1660379158470_0.9181216583133796"},"_hasShrinkwrap":false},"1.2208051912.1":{"name":"@bentoproject/accordion","version":"1.2208051912.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.1"},"gitHead":"c9c6de085436b10c2fcf8e6c10541d6d2658af93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208051912.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-jLs+cnc3YPfXO7DRvGfG6mclwY3/E0f4Eqt3iSZVK3/AUHs5q6MlVziZGReH5q9fI3EwIIjMw1WD7tfeR889qQ==","shasum":"de42153f555a9e69e2b8b079704846c947e397a7","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208051912.1.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRdhVuWO3yNdvEsROdFE9KV1YsSTbwIlVZc0Dkp14v3gIgbluTHsEhZ6UNVjwtVqBS6pyg0phyhBVRQWAcZpAa+s8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/CKPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobCg//RGlh1wyUeSjDXb7VZErmjkZWcN1If0fiEeWHtbJL4ozwTPIN\r\nkt8iJqyXP8xGexAAu4EIWzsAptPzmWSbhJX+8MslNrtSb8a/OwfnCcNUXJbY\r\nytVEj1a31NYN/dVw4SjRwy9DhUB73Vtv69/wcbYMOKJKS0beH7RLZgmG2Cu9\r\n4sxu8BNTJs0AYLAM/0qYyBCNjCM8OrNu8TUKs0kcJMLxyGFed6BopJmA5/Vp\r\nVRr9x6OJavqDleE7PdZ9DtewgkjxsXKAS9E4DBRd8Jc3RvrvwYfS3vkZzT9W\r\nx/4NIso2YtLlXr5qyIFzeX5Ca/ZmgG52rIPBKbfoqOeTdrG98AVjMnhQJwEX\r\nbx/IPfLz676/DZSKFrC08pF52Ynew+mqd0hBf/xA6gHHNqouFDaFDogv9Rpp\r\n+Fdr41MB368CdPrW/L8ibHCw74B5yhNf+i0WtRRttz41Xs+QAuGLBjPVx/+0\r\ndIOmKJ9Nw7HC4KkxEs4Qb4cOhv/7wcJGNUEkhYhFyJEUWOGKqxbLNLAT+a2t\r\nSWbJKvBCsUHIOJS0BNn30iFVDJRc81n5EG8ZegILzZ17P4bD3VwpvJCgm65k\r\nCvXTt4ApjNxhGqJsjGvwPSrIgamynKUjixRlyp96RA9wT9p45LTFG6B1rA4/\r\n3pzI4BMJmt9IqUr0uhx6F7a0tbKdwtyZ50E=\r\n=4SIh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208051912.1_1660691087090_0.36874444860527134"},"_hasShrinkwrap":false},"1.2208172101.0":{"name":"@bentoproject/accordion","version":"1.2208172101.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208172101.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"372d5623dc25138bb97bd48cd5f97f3be8008658","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208172101.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-1G2FHaDJUte5IV1SSZqMhH6xvUPBouG/Sf7E/G3Wdg7GHNsn0ZxXS5QWDgr3PHf3IvSc6oJLUAYpwjLSxNMV1w==","shasum":"d9019a79501fe31c033e7d84eca8eb791348d1c6","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208172101.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEXWjRjdKAIccvRO4A3QScgJ9cFDq5HL3ClhTe8w3hOCAiEAjJCZfIYsq8omyDwkJMS26ErS8m2vlB8INvK8gNj53hg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBpAaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi6hAAi5ZKazXzw9BINET/BR8eZNDuJm/VY6THnlTMpVbIyLGkywJn\r\nz/N27kpjEql1LPjJM1qPuca/5nkhB8CRDChrAz9D7lW0qEuT/zpcABZHepSM\r\nBp578QIKTupqIMosXwc/XAO9AIWfxbdBORKy3Zgvm2FWIuOYjNsX7my+xdBf\r\nI8/I901xUUPWv0ALZc21e/li6kZlReTbP9AQgC8XELptbGfpyXcKz/MTztpd\r\n9Cx1p+nltuDOScqn3GR+cGh/ExBFnm7MOvbofrRw9bMseiW5mPSXAa1+vdDy\r\nRU4UO6gmF5Dzzas/9r3tLf2WcQT0E9PNIZG8cY3vaXL3aNOiwiFOmYh2l5ot\r\nzi+IV4mCcYWQUbtikT8twr9XTr8LSrfSoK05Gp709bIH71CzV6S0ZyA9NIGB\r\nNSHUtXcK2Xgu/f5y7mtdftcFx1WSqAeYMEuNkwob3ooBt3a4KCJsKl5HZY4Y\r\nUjcUm9QAaSX3e00sriFKgnYLJJCPV0kj7nBRnP5SfMpkcMjItALTk88crbCr\r\nCoV+SI5xwRg7+IL1nULlNtV5Hh+5QSD5p122gVY9PsoC1iv2MP+OwmInri87\r\ncP/+kAQ7I8aGwBqSaMm7OqeTMyF7pSIi2fgNLfzbFP97Ooagego3U8vezIj9\r\nrUTnMydJOIDb30ImzRpwR6rl0Zcx76BCRYQ=\r\n=a/CF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208172101.0_1661374490216_0.5266191699095644"},"_hasShrinkwrap":false},"1.2208242209.0":{"name":"@bentoproject/accordion","version":"1.2208242209.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208242209.0"},"gitHead":"0775e3db3f5e3447749a9de6b4ef38433f6db4d3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208242209.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-dRn3PvcnG6spqCoVunkyJcQ1sXof8P1n6IiqvN4pBr0FbpnnQQmF2e/5gdyR/+6pA8A8FWKyEMcPHykq2kvDXA==","shasum":"5e4ab4c24122b3649f4ba9be0d9aecabc1ad1e70","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208242209.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO+GyPrV0aqrzoyfPDczOwgwLF4BuOv3bRzRZ+22LvxQIgZwVE/jdy3zb8Kdma49RZVhr+UBGjzR80FJ19tiCrPSw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBzIuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMFQ/+ICFbDc2TusoMTXhxB3WUgmVpPnn/VvT4+Zt91nkbM2zx9pta\r\nbcKoP4FgT0BdMMtfUUKKyI5eHx4MJyJZsVdIOrc4j/chUsjK96t4tcTZzETK\r\nQJS46nVuUsa7Qqdbsz5OR3JEJuPY6rrkp057NMQiWWvQx3uhcf9p9Z06qADw\r\n9GqAHp/Gw2orSMNc2HCiW9xBsYSivmTMqLLygFAycyW9AZMLWvhngnkjoxVo\r\n1QasTdhfJrcZLfJGy55jxLx2XID5+EwD9NoHo+uJdhsyi8ZUY/UUYa4PoYhr\r\nt7ZEYvdlE15S4Q+1XmGKWmIbBBcExqBcqI4q04PRJcK42QHrtJIQIn8U2GB8\r\naJAQSBb7yH6Zh0/AsIGxB+5cd3/kVlMoX1jLgUqVZRCsNIrbp0FsjiIf5OMH\r\npvvCBwr9aX65EPUb3Z5Zkcw+7M9AwmBl52hACnlYb86+BiN2Jyhk9/gI1Ak8\r\nJgGCX0+3HRmqSF1r9UTvHEv/p9Nlkm7gsFdoW7oRyPLjQAKM4X3nAyYOcltW\r\nbmSJbmHBD4+wF6UYWIj/IcpD49LKOy4KvgmcFSmhPN0FBj7aOPk6jNssvxT6\r\nqgOfZPjdWWUMtmFIe1er7zNB7IDy5cxCNRUbMCjcXe6Fpozz4AigWsQ9m1bQ\r\nIiY3kTzvSIUqxdxs3/BHCtv/h3SMqaRhaDE=\r\n=pssm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208242209.0_1661415982084_0.131139098118209"},"_hasShrinkwrap":false},"1.2209072154.0":{"name":"@bentoproject/accordion","version":"1.2209072154.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209072154.0"},"gitHead":"b0743385edcd11eb02b6e380c4fb5a18793960fe","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2209072154.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-sH4dYM9fWdH7BAGnWh8KEwxxQt2up2P+ChYSZWR9RDapsQOKE79bF1P5wO/7lWsuUujUjgUWn4yaDL6Fk2b0QQ==","shasum":"4500866af94ef1a6c8c4bb2ee848cd07d00fcea5","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2209072154.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIELffSRYNlEwZP07SxpsuqmB/57gqtaTeiTNEKvBngaOAiEAy+8eBQI7QtA+ou/XlRb3fKd7MQo44ooNX3xBtJ+uAw8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGaauACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu5w/+JGnfp+PFhLxnRbu14+Y5do89gB3yuSq9X3Hofl3F55BmLmg4\r\nMy83mJQMILAQQ46A/wlSm7Gi2/Ttj2laUns91BinXj4atvTNq2BpA08CY3VU\r\nFB/c7AJBOWdsnyv2kCkWwE1uP0RZPxUT/v0Wqvti7LgUY0ZIWrRf7HXMRAW1\r\n9SaliPnKH9jpUhJHk1+XkCtyIh7Uxao2H/4bZch5OcgYCZMkx9VD/TicQ9Fp\r\n29J8ABvfZg3ebQ4Sr3K+AlCgz7QGuXHoAJH1PwNLfES7AUfpl5xoTsWcsv8t\r\n1Uq6LqJjVu4UEd245N+1QKKtxDN88/FN8G5KwdwNT2q1+kd+6oGPJX4DnY/6\r\nMfPCxu6DLHzWI6fnF7LQThCme4fc/wKx1SRqPgFx12jkVvEhVHEL3QXR6fRQ\r\nC3h46FP8aMW013X+ieTI6moXDEs3MeRPjLcue2hOHFk0A7GRlroLWpAPiXIr\r\n+GlsWR9IXvHDrDGfldeO8O17tRSY9U4dejVfm1rTRVZOFYQFkQrWCEsNxxXy\r\nTPmXXyIQ4ppPTl3YWfDkeaZQFYwEFkEmoESiWoVcieYdgT/m/lpiSZKvdmOr\r\nGlaJ+I9VV12ZShHsVYV4k9RwHQOWe6IqWaP+cUZgZ20mZ2DxFd0veishiYsw\r\n5kvMkWNsysd75waUGzC7yMVfg8Yp+Tr+o54=\r\n=91mL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2209072154.0_1662625454298_0.6323411115949833"},"_hasShrinkwrap":false},"1.2209131909.0":{"name":"@bentoproject/accordion","version":"1.2209131909.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209131909.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"b912a3976adc47e6a81ae645cb98e51d1e778150","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2209131909.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-BqcmFIRNPf04ZS4DJ8UUx9RjTQAJxQ6Ae8KmReaFH4geuuDB3hzF4Z+sYdaPFITcPQ0TLaArDdwjoMx0bS87fw==","shasum":"e1a28b814650e48602e8392757b338f5dfc6d355","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2209131909.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCO4wgG208LUEOVyULADI9hSk2W41SIYLKemZY+jgX2pQIhALmq+pCglP3bKbTyt9nvUDS28y7must3WeqSP9p7rJWn"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZRPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrY1w/9HwYiw5QMA0YyaMQHILXjigHb6esU+h9HuJL+ORtIEyMZE3RX\r\npjz1HxxZ+QkRbrKBUhFKV4hDtlK1Y1BKEBzN+hpuV0sZEX+9LH/PRGYHiOHq\r\nTM/NJDFmvLeQ6qxgR+JvkKr11eK4VfZ9BiHtesAKfGuNcq0w6u5mHfvYxPjV\r\nGek+ljPeVQkvgQcKIscV2VYwD8Dx2WPm2WpVm719JK58GdejNtx6EQ2G1vyo\r\nWkrhOtm+birdCNO7onWBNEh4BAThPdvu1m7eZTZ+kiX4UNQG4lbYmLejlGEF\r\ndXsE+YKueGyphxn0QYLThDoAX8fvpffz5VFWwgirXKQfLqw+8mCBnW7gHWZo\r\nrEiIQRz58yO9M2QbQK2pGHral6Ba9/IvPIZTtB59VKkU1tzIoFV8JTVwkUrA\r\nmyhV/K06zEZzaiqsF+tHKGHdsO1ay7drbD7BcGUVf2eqQ40zg/ksEuaBnAYj\r\nN+/Ma8TKoOPm8KQkDX3U8zHzeQzHcj+8jq23t7BVAUYBLm0eBFDeiAylxsRl\r\n55AH7iyo3hyVTnNLe1awYlar/6GzxdShMx96e4/ly5Vn8EJQPHkwjSEfpmsN\r\ntkR+/WC1b18fBLPtbHx2UKNp2cXd19w5a58TZt8kAJWP/Mq2LJpQkRk5EFHj\r\nRjqSRB/u7TIThmGuSluAnj9VldENEkixrHQ=\r\n=F5uj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2209131909.0_1663145039373_0.2898093037191356"},"_hasShrinkwrap":false},"1.2208242209.1":{"name":"@bentoproject/accordion","version":"1.2208242209.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208242209.1"},"gitHead":"a64b6c7fbfdfb75c935b112118bddb3fff58ba57","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2208242209.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-9D8+sVTKos/5yhMKSH/MHKNRqJFcqWHzovkS/fZxljyEjc1RSAIolhAmCc8MsxPSfo/1z08yzm9m0FkDOUm0pA==","shasum":"d1d2ce7b28d1536c35cedfcc72df38d6166290ff","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2208242209.1.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7oRn/Q+qj7/C0uTaZJQ4XHD3ltm73vz8AEEUX6oguVwIgfQz8AtFKb+ZxJ2rFaE/fsvFFhMvf8jQJPfHxVm15smg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjI1XfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoftA//e0UfUlBQAE2RJuokX9FMjcmjMfSLgBeJ6bzKVNT90ATCUFYz\r\n2jD7KRCTZqqwyu4AY8LIjvHpKBjj9kOsnMP4KYxwriywDBsQFstd+kafvVVC\r\npuKOYKbrR3o5b94BYK8xc4eUZoaEVd62C9JEZmW4rF3XvyTYwh6xVOXnSOJ/\r\nNUNH39aVhJdfJiPdyqUVSYsjQ7pNIjNF14UnoKPIAsmpE17/Cm04cNdvReuU\r\nz4ZnBHYiWhyd87/NZfGht6v+rt8nb7qzDxRGSlqB9nBPkwcb2HHLx2ZRyfBt\r\nmx945Fwi0jHPmnbqNBesZY2nNbUYxh46ON61osIrl+WoFbt0GLfdkmfxqorq\r\nXCx2Ef271XsWREyRMNmhyoCHVyIIqT0BnbBapcbsw+/Wpt2TbKuSYhwo3Mn3\r\n2dRPyF3hahtlCyN9HmBb4ZmrpVxH+NmC2gAW+ev0OOcOXOAg1yGgLpn5t54g\r\nTuyiY8W2vCcvEvatNauh/TBFf8SRBGAKUwyj3e8VXLgpU/sop2zdlfQM5QPC\r\nxx8yZqpNXW6yApyXc6aNsvTXiK2qukOrUPoH9OmXvrYCcCpOVE4Xi0d0ibaT\r\n7AcdgJVaUPmPy3soF1hqdNFI1tozBQjBn7cM0N/dS0Hu98PLdXOsi5lb/L1G\r\nyakPdCWQO0IAOsnb6SQBTzQuM10SXcj7KeM=\r\n=aZMq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2208242209.1_1663260126983_0.8250607241916994"},"_hasShrinkwrap":false},"1.2209142312.0":{"name":"@bentoproject/accordion","version":"1.2209142312.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209142312.0"},"gitHead":"8484b3b1dc31fb138a231b2368acfe2cb4eb913d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2209142312.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-8Ynj6iFOYSaxGt2bzJCKuotBbpGBGzDG7yj4IE/9Pw65JflDphaMjtCD4BwGH2HE7RMyqMNMrV0FxGMcgzVnZA==","shasum":"74f60d5079fbf92724a0506949ece4593d132907","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2209142312.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFh3kUGWd7WQRof6XuAGaUTVs0lnrGlfTZuv9fxkUrSCAiEAk3qtMKsCTixwwDLttT+Kx/Cs4rvcnbMbEIFVYYyfSPY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKjmdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoE4w//VoZvnCkGWrWj2+pBfH3J/LRpP3SWEaA4AgBSXOt2iPY4yxur\r\nrD2zOpjptNaXlTwjFdRPcu/64d+Bc+Pes6hUH6d23XeaizazfOojQVYmLB48\r\nA90nahoP8KHD1+4oiNc4xU8llN+kaWX+9NwtHbCb86A9NLPGFMocN5wE0n6k\r\n3UUlEKGvokQKydh7a1+jGPZzeFGxg4UlDtgzVFGL9P93P9S2OZ/pTuzTD055\r\nzC7Q3Lhc+SPXeKFTcAp7Y2XQM2JB8luEvl7/FDRx8XrXDT4m7GvmZ9hS50M/\r\nuTeMydOeMfD6+bhVKwu33Rlftr9IxTDdDVeOgUVC8RLONKlIKFmMqj14S5Xb\r\n8qw93Wp6PyDm5cYR8w6KBoL0jZpEktmKYOqbW9C0CTuaGTubsc08QlLz+wM8\r\nJ2d4NNqAkgrzPtgtkQh99QM4KjZo2K2r3sGVxQywXFpaegAnbozZ/qRqBfzi\r\n7iZ6Yu8ZY/obcMAfeVm6M9MJUSRIaTKKqpGjFtt8jJJI6Lz8vDORuI4vKdtK\r\nog19kMKGZBGcni+nI/TPRI04zy4wX9c08mrPMKhG+tvl3kBMBU+m08jphiF4\r\nCrhSSYwtKx07Dmhu0PwyeWejxW+cpxqSJ22R5LrFNth7ytD8Eic5oEgQank4\r\nyBLlMIN4u09R/MJwpf15Q8yTwlZ2gfgcgFM=\r\n=Xp0y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2209142312.0_1663711645655_0.017189720748195914"},"_hasShrinkwrap":false},"1.2210010655.0":{"name":"@bentoproject/accordion","version":"1.2210010655.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210010655.0"},"gitHead":"b0c5acce5be2019b787b6f4bf7feb13b045ca7ff","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210010655.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-g5txJnh1NlvR02EPLdI7QD1YNa3tWzVZu3rJB6i1iK81GhS1W5gwagXJK04CF/jLECXrbQLbUDkZBLwiVsNUAw==","shasum":"1e505e48bedb8d342db2bb2b60d712be2e825cdf","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210010655.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlsy0R9jEga4a2C3IJWcZGaMXCw2b1Lv14q3Bk5vwzQAiEA6rEQIEeCMdt6OFPWaFz666w7qu09oghfIdxG56ioxuI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGPpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+Vg/9HlGVCPEpCwowhdOcmAinbqIt7aZzXKMakZroDVwAF/7F5a5b\r\nFqLmEb4UVqXkKPFm6pOCcYZ7XfFj1TPFYKpqLUG3N8z+a/53hQHlvkogqNNx\r\n5r46Tl7FYgOgpBmGQirlp7wsVQy0MQCtfX48GepK03oCtOc4++N28tIN4r1P\r\nrDS/RX4PAqgWqhEparL0Mvnee0Eb86+ml0Af/v9abQuip521bz/9RlvlquB5\r\nP9IHa/jWNYyW4hAuOn6Mv/fHkwzGjMq9LLMG65CaRHDW/AtQmNah4jOi2oM6\r\nKTWR5Ri6V7r1J+caN+lvlfK3Ev+kcK6GJxhj7Qsl6JwsXXaE8rSpbjRhnbDp\r\nDIrDoYf3PEhx62fQC3PCip16VWn9I041UjTJ6UjFY84zAkWLyfX42FryrXVP\r\nsdEGZWpj5iAgUNvu/x2FaFV8ug2tB1isc7Huv9YJG9Ajhf3f0nlhFlN1X3+A\r\nj8JoT4WoHO1gMZrJ8Rz6PfuWbiaabfJJrM55nzT8FAZaYE4BRnxx8cEgbyNq\r\neRlplZEVAl67LY4Ssfwz5GhqjF2ntKG/US3ojGZrzFOas2/uiYzdOCKJgKil\r\nFPFB7ydp7/JGRmIifvBdDvjqz7C0H6ZxWubtnPo96RrSXXS+8JJkPfNCskse\r\nE/oV0jvLByMQqQ9tohHWgblsY+2GeUi0oiE=\r\n=dwpe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210010655.0_1664902121623_0.9458573692087839"},"_hasShrinkwrap":false},"1.2210041838.0":{"name":"@bentoproject/accordion","version":"1.2210041838.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210041838.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"e79aecc1c4639b06a7f2843d961bb14f293a53ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210041838.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-Tp/TFhuqPGd7DiloPLKi1EsXODDPZxbBvHy9UI8wdIBEg0y/osBkCbgIAv1rCPtynoo0ozunaO/4ZjZTQ7Xiog==","shasum":"fe72edef3bcb5a82b20ca7118fbc48950b3918af","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210041838.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4aGOzugmRLZtEivRhQkQzaLWZJ5BP9yy9pYdwUg/g8AiEAq3DFuor+QElNudPD4sKdepFaDdZegHD3r1JyH7z/EW4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPUBxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB/A/5ALUfhllK197+ZpY7CIRAiCUAMnXJR/ifRzMr1DrBZvKdxMVe\r\noQfgZGSPm2udhiWXdoq8byy2iP3tyRAc5jE8lvO1ou/wgIE+FNXtafdM7PVM\r\nbFWwubY+dktgf/VBAgVpIjsyKVs7uyAV/uTo0av3E/GN/gQ+wXJ8CDfiYnX6\r\n9uyzfvs3/QsfrcmR5PejXs0HsCh5atqtqximXAcnziWnCw6Ap3BBntkrRRdj\r\nw/hJMxwfYNi8rx/WUTNRRYZq+1+y1VAyK/KzUn/8tIxnoaBkN/FO/TnkUA15\r\nV02lqxNI6mYqp3kTAPcrenreYNoLbAuvCTjVkPw2YDxzwwSw6YhQKZXU9vur\r\nGNVAESM3Cp5A8bBTAREe+cswMvtrEsxE5Wlgk3VH9A0boi+w0R/rjLj9+yKX\r\nlqdy6kexUUpQVzhJiJRIRGqH8djR4XtOH/yHR6cluF1fUkaSZrbB3SM7/1QB\r\ntKXuJvws0y1sKiP8N5ODE7cZWQCGanoixwmwAOD+ShB4xLFBvXv6lm3w1wPP\r\nmX/06NqF7Vz6kGWpmFHd/mT0eaqAKaZSKOryS8GY4dAQmDjaukX1R7QtaU8V\r\nDs1F8dUDcBdGGD2X8+nmPE8wpgV2ikc3SDv+21xqsUlWDB/+c46kkNXzTwOv\r\nNejSwl0OKJ6+Qgw1YJ/UqIDEvHqNDqLCcdw=\r\n=ij3b\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210041838.0_1664958576660_0.16218993175859664"},"_hasShrinkwrap":false},"1.2210052034.0":{"name":"@bentoproject/accordion","version":"1.2210052034.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210052034.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"8a0a0067f57f89d0566ee1db3d4bfeea072d3c56","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210052034.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-lB70SWNarOXYVJlML2mSVH4dgzDY6zMEq+Tfj4FWS2fRJ228vhC0Tem6Z3wG2LzYNoL9L+tZnXxOOAsGzAqBpw==","shasum":"4382169ef9f6195674b63a34ed9a8c594a279cd6","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210052034.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZRQxt5+FWHSrN2OB3AlOCRLqApC4TitwaKTHaZ+tOvwIhANoujj341jt9q4pIp/NUde+h6aXpedDG02/AcdQQO2JI"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPpDWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKIw//ercCh933nrcTSCZ9jBWKFYcGPkej30mLCV6KAp2+efsvrRHk\r\naHtBhdDVbh42gClaDhS/Ap9DYN8WnSHIOl4pC2V8UoilMmTbiV0rZ7DOnydn\r\nMJUCGWy1pKaHbZnvJtDADTlKb3Z/fTM+s+It29JZVppVeJVwcU6w0OBx4Qlm\r\nTRu3qeXCu9izNHh9vopXopsIfzf7Ha8X9J9q/pZpn/YlTCZPdzmRzvW92A/8\r\n4QSfwTZhYMql17WB7pPRke3iZLTmM+RPVsAKYEMSCtiRH40RQU13Hu+vJjfC\r\nQkCjs5BxSpVScfgeLkTTH7Nq6lwORiI15IF3Jmq9T1xq6rDQiFohqi+2HW8j\r\nYb4z7vuujZbgKDAaOfPFcZFijbCJQaQpaKrDKQ2kkXjyMUaHwhR0T1acxOs+\r\nTiXP3s/WyyBWievH0ziDqOcfb7egzuUIp3qek6tvGMX5iev3Pjkq3ItxeHUY\r\nnWGLpY5mg/QaaHQqFSutc1miWNUsW0f5oa3p/Az6my0KWmocN00d9k71W7Y5\r\nBvF3Zv1lAer2Su2O12wT0/6WHbO5Sz93PzaS637GDlJD9xBEpHJKWZ1i1Zn0\r\nDE3XNmWrjHnAPrrJgolzXIK0I3fW+fP7dmwV+RhtGBZ9b7igj+ABqqpmDu9M\r\nJwftvZExd9qyApokfPOZA88muxK3pB98VkY=\r\n=dXzr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210052034.0_1665044694616_0.4574375826815309"},"_hasShrinkwrap":false},"1.2210071758.0":{"name":"@bentoproject/accordion","version":"1.2210071758.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210071758.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"7c969ff5fd5406304f6a9867fa0db59b74e94524","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210071758.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-W57xSmkCyQWMVPI4leeRaRTZxT5IkoUhdGnNQ/JRMRlA6r82+kXOsivI4RBcoaUfLJogvrhecEgondchtbw5tg==","shasum":"b60bfd88cda3e77bac3fddaf663a8c03a430753c","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210071758.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCELQFaG3FOCL1stoXciXgxQc0Lw5RsEUIOa40rT+QuLQIhAKqSbfSBXyJgn2FCg+Y/VE9FDLkheFG3Oq5p1TNW1ZTX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQTRTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo46A//eA6oLESVXVKpqFCjaYeO7nXX9vWwRx/NDTm6wcBD0Mv/yAJu\r\n41uWghDilO9ADRNFIVmJaLUh9WDymY9p85efGgumBCfhzjCm3Td+epPuA7eu\r\nPnzRLbk6XJccH5ACS9lSIXQ+DVhMoP8TRb9fmKeTbMbdASwbo7HibQpbwH65\r\nTbZGmHqp08lXrOA025tMknCCXZDKNYcbyRW4/ZnvXdzv+yBrbMQS+5EaK4W6\r\n0SP7XxUg105NccIli7HfdiT6A8nT9zU8M6y5ygTLJxUiMk9sCNGNRh7yk3Hc\r\nBJDqP+O9ZZvLLQXaPrLr+mbit3TfRkjgnt/bBuputmgKA3H1F4YPDWe/6K5G\r\nr6mi77/19RGtJaYAI/hbctPIVBONNrf0AOUTDVV4DL36HGr85vyd4jUsOuCb\r\nh8+Ds3S2/00ZqpcmtjXGpFOpOvuMxA8knck0Zwqjpn4ZkITYoVQ0uq0s0/WI\r\nMp8VWggaHYVcEyhg7fWNHyonzJiiBmwQhODhv4Ffbn269KT0JoGvSZgC4YJ+\r\ncX0TStwnotizZDtKP4TI3HHsM+sUzi2b4sVAU1U9rK3vs+lqBSp9Kl2IsLw4\r\nzZAlF1ZCA5cRpQcq7W68nW6TqbqWWJg0qECwBsTBdtnWfhK1z8az88yivHAN\r\nPFeCnReND6yKw9VCBl0qDRYCk7Ij2x5DPnE=\r\n=V0e4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210071758.0_1665217619573_0.5844915631168761"},"_hasShrinkwrap":false},"1.2210112333.0":{"name":"@bentoproject/accordion","version":"1.2210112333.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210112333.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"1d82bae06844d5413aeb632cfb2f3ef443548ad0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210112333.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-b+5JY/b4swdw2UahveDzmvKmyT+7h8nin5+CbH7gBZVtRCRlWojS+NQ3vLNLXexBMsMibWdW4zaSR0ZvN5CYRw==","shasum":"26e8fe748933453fd2838f2945637ab7a24f2adf","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210112333.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLngDbFsPRxIqiVYGBwFPSrX9wCyVrrX7MSgvYO2P6ggIgDFqb8CuDw8JWp6T9wTCkedmQyQkvGiGYLZD0/6W9eK4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRnmrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0UxAAigKrkG3LFTvvLEIvKWbyaDetp1UGqE9dq7bS1hdWyHH3IxcD\r\n4xeibb7Lr6gn3pZ2oulTxTbhzjY7QzyTEyHX0Hgla7y3/JL3QjtkuEeHcQxz\r\niBhkuebl73qIvdBS1ui18iieGn7sWLfefeOH3Fxotr8xQiubg7+EIjufA0qi\r\nBbcazazJRNMr/Hw6RMrUqZPqF1OXS13TnD4czZywN4uhjIBzEIaBm4Px89KA\r\nYghwcxejqQFHB8kyiWNDs1tDb/DV6tGDga7sv5mOOrhRroxG1zmc3zHZPiGR\r\nVle8YtbS/WFT5agUfjo8sKQrbWaGq6i3vczDiUgBcBJfI1xzT2++RVuhrMQD\r\n6W3oGChSbRDm+EWyOzZVgAErGC1W0hGmTHbKVtoFmgu8eevNk+VizeRwmQSR\r\nMjbnQHRYG8SdTdqfGQ6D8Xw1IBjVu3mNYUZ1g9Io7LyToG2431O2sfcTr5zy\r\nx4tB6D7KLyfQQG9o93bXBzKCXWMlwJS0RlN4F6B0r5vkBJqoOhgeauaXq2dV\r\nFPBmxrmpMK+cmgOtUHmcAhW+Mx8bmXersPrZ7z2UTCj9WGmFjFaC0Xpy5hPo\r\nyl85cMntxezWz1arFfxmcg6btb4BECagT37jgaB4SwdWHMoFeqm2m0wVx7aB\r\nc0oFgXjgUm4vxxBrroJEWmC0u6/j934qmXY=\r\n=7Xuy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210112333.0_1665563050775_0.5137658633479523"},"_hasShrinkwrap":false},"1.2210142102.0":{"name":"@bentoproject/accordion","version":"1.2210142102.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210142102.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"4cbbe2b23e7b0c5b0c005c94a574ea48a45f7693","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210142102.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-RHIycT4n29DG7Ja0G3ly5wH7m1TZis1ARteqoMQPHxOO4FalxSz7329JS/LwlkFTsOhtLhOXebV3f19UNjdosg==","shasum":"8aa09b577e1f425b315970edf10c2de8a289ef15","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210142102.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrlGEWKlmj1sNvmZ8YkBfD/V5xUJGf8lquqB7OWbxx0AiAT8kgTZpHGHit2iGMDV8udFPzEn78ptATt77oenLZxCw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSm4XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmUw/+KrGBbaeNPgcPN7SHjpsvh/LAr5y2cuPaIIIq/rxkLf/sG1h8\r\nDSrM3chp2BqYmeNM1+Z7Ss+KboAqzFwh/RClocbAre7vRQJP/V4/fX4SthLR\r\ni6gYOIwKle0c24fNjXqSxxqL8QBbkO6dx4AcdIBDg0rx+NbCu9eHp1ARzS72\r\nnplRSXJMfaoZrOBB/5GfINJI5uxB/0NAAp0nhMMbgkeSlNSe7vMqmFTQuXoi\r\nFJLTpwrRxwPYWi7wpv7b7Uq5GiMWnr1gRQzwKPQetpirTU9Tecqo4wARkYoW\r\nMRX+sFFkIVthA6CzLlHN7FMjA56Vyl0VUVJilSdfLjY+IGymAoAC/gEr0nkf\r\naggIypPyk67xbkEyLQOzJ94SmhlFzuk2bUzJjSrJlEuDms0Zf5MO4XXP8LYf\r\nRIpNiS6F944WziDfzeeRaKz5XOd4oOChjh96TztCDiZmisLUnglDcCS7jr6j\r\nVU0VYw98wDgHXhPlPL/GX9oTeA3hKn9ewjsk8YX7lNR6K3aKrnDTIllR1tVb\r\nJNFxKF/eLFlG11DPcAwBr0r4KuZFX2ElMf50bOYEFY6GI8Qz3jVbk1lhykk0\r\nX/64UthKCnuo+V+7wsq380xIr9aEfXgai4QOhbZkU/ChQPTSGF6f5wdojNHL\r\n/+zc+ItUC6huLmB/OT0gg/42PWwvQfj4xTU=\r\n=jBZN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210142102.0_1665822231132_0.8406520331310925"},"_hasShrinkwrap":false},"1.2210172057.0":{"name":"@bentoproject/accordion","version":"1.2210172057.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210172057.0"},"gitHead":"fde225e8d98aa5d96a939351e6e53cc7abb13cf6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210172057.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-i1nmZHf+1slmyVnAcXk9ygboPSZoWnASBbyvbRAIxSH9JIwrmyqqqymeuImO8x24wzMG4qqVAQLZM3Lk+HuPBw==","shasum":"81a5c77d649926c32e271e0d252b42f565cbfc3d","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210172057.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnRZkl5pxOQ1fmWVgIgaoXF5bygR/hPWMeE9YTiGbOfAiAOAGgjnjrg27yKO+fOuZfSnqv7POTxLFjkwdyY+7Cukg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmNkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr51Q//TCb7q3ED9LG/sBj+ZDlR31KffABXHeYedB59P+ZJVASVkfMV\r\nVyEGvwbyyHZOIAnxkYQhXXKfbnq8AsV1/ZafmhS5hmmxjFX5WdsYjTi1Lysn\r\n2/b6eSf9OIecSWgFURHIJvYtQxv0QhJLME5JqMr2hFwYwocYNbI5WQzuSf2o\r\nzrhWbwUz3nI9jmmaNSgcSJVuBqQMhLienSwyqEYpLDxspke9AZCrlVXcsXNm\r\njWihurWuICvLBfP+npFO6QUfT0pqhMBpz2PcxsAod2HNmspYJgAs40Z+bGba\r\nryKO1wy1xFGzAH/5VahXEkL03YqZq8Aitj2bjrLMGnzC5ogiWIC8K2pTW8cA\r\nWXDXQZvZegXKrbCfsaqZpjZ238hD8sr6BPRRck8LybXTox8QPsNGzNp4K6Cn\r\nHxam3dFx4/Z38CMDChWhB0135hG1ceaVe9b93nAv7QOAK9wcqmlO8RnLOFN4\r\nhoJtk4wmM0WkzCt92LlsIlWrfqsmITFgATFhmZ6QVQ1t9gdDSOKvK7u8o4RC\r\niBeqLxX9osKJTUHug8VfiRXvB6cXkM3ppzMJzFQgT0njQbuPS+dhC2UKMrQd\r\ny3wOnPQbdOCq8UKQdblTdu5FM01SzPReskGy2IO0C4Cboi5kFSSstKe4/ZDe\r\npMXekqV/kyV+5YeWPNckcQR2LTgkDMgAJyY=\r\n=Q0yV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210172057.0_1666081636133_0.3405325258946237"},"_hasShrinkwrap":false},"1.2210191347.0":{"name":"@bentoproject/accordion","version":"1.2210191347.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210191347.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"b2888af97582abcfae901ed340328b22e9caf2fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210191347.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-lYIHliMBEX2/JNBSBnBAcTe+CySoKE/2pDiyxoZpboxaBLpzMkvV79UEqLMwDTPbcdaU+657rsk/UVpebaFu2w==","shasum":"d04e1717dfaa0198e4950623e0d103b3ef970463","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210191347.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCGr3OXbRbTnnS6UHrp303oDx97K4S3wf/6REaOfT//wIhALgmEpa/V52YwMwr09qWszHQwdiPY7y8HY7e/gy5zLHp"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQXjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCmg//ZlnGPzWQFFi0Xk4KRsMrdkTUw3bex7s7n/VeR+pcvij/Alc4\r\nzMtw37fzD1NfUmdZXIrk5BYIM664XeSE3x1thR4WyC6uZdRYg6DmydAS0MmM\r\n54iKTNVvFuruPP2OpWde+C7ke1TRMz7sfvXdIZy4hOwgQ0MJT8tyj7w6EP4M\r\nUdtC8qDUCOzTDqwK+FtBUcI2lTUq8QlAJCSX0LPrFL0/92VRQeoNt4CX9cOU\r\nTnwco9ffsVaD2e+CNwy6Vd7Jqpg/2JCcBdrmDldRlT++L/3CBwNlj4CvN4zI\r\nQzJBxsrkKWziPbJKtyLgUZ46Y+KLUDJ3LOlbTnSz4O9+m17yLs1i3hilD3Wv\r\npnCefOrKV7mTUiumIVeMYMj8zQBz/wvXmGt56X5cEvi7BkYqe/lXDsnKyMS4\r\nSD13KAysA823jtkMgLaMx1icbIx+3PWcbwJgGq+5LTKlcDHxmmdvQaH79FFI\r\nVeT2QjQmF1IKOJUpZ1xXnPYNGnaqpbQcRxKzIHtY30i3zY3goDis2t4b/WIw\r\nIBHkvjrGJ5LjUw0NYhn0/20GDwXE13ZD7wQ7a1H1Q7lzHqXEu0oJeGR4kiRN\r\nT6mAY8/gcK11m2VBtYSJF8af80TeXYilc+N+2Hy6+E1Pz6a02qNgYAaEsjwA\r\ntT5S0eb1pZYXNqjCKbpP9TseuNygRm9XKT0=\r\n=5pdz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210191347.0_1666254307752_0.3692237763996695"},"_hasShrinkwrap":false},"1.2210211855.0":{"name":"@bentoproject/accordion","version":"1.2210211855.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210211855.0"},"gitHead":"07d99f82baf83d9f0162a6c7b8790cef43e820fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210211855.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-73fGGq7J0MogfSOpO8pebw/tyhy9GTcXlA6xnDFJ/xsqZ85G4BdZtVy2Ozz0cvQfKoswHBhl7BFLbqO52mI90w==","shasum":"c770b7fafb48e77f3596e3c71039fe7b65515279","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210211855.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCElTlTC3qdKJ1VJDz2edCuFPF06AjtZNUVK/vcixc+XwIhAP5nclBfslVoO/GmUet806IkcTIm58EaTTkFl7dOEnFg"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjU6h5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraLg/+KnHzS4FzQuMXYVeBVAhhd0LF/p5vjYffkxYB44DBUYoOaShe\r\ngJ7kWW98y+vRmpXywHEeTb5ybLldhB+9ss6kL38NCCYxvMh6yiGUXSg7LtNm\r\nds6jeDo4FlYtSwXxv0kkzp7juYzaqzrYF0tJjX7plhMJ6nmxlHIAnZtyzjBh\r\nXwqZNfMz/cunxBalwP39zWAZBrsuTk5vRbNwsYMGIMcE9P00/bnejVD8qzeo\r\nHdl1sUDPShxu62QCToWCzihapVatGvyOubCq00SOy4VQE3R16T0t8ccme0lr\r\nVQ4DIMNAxN+JhrSr4JuzTY7eKUrZDQVFnkWWEyhRlKvpnezGOQRDsqpBit+c\r\nAHt8Iu1CluRe+5Y7qIReNwBcQe3k0E4kRD4hJKROQSFxU8dUIqu/zHFbuVd5\r\nQCw1+qeGV+vIs/zO4QByvGumVtIIRdFHyoaMbRid1adsKxyr9upF5iEZW3ld\r\neQr8iNLYVT2yAzDdkFFUbIP8M21EMGsY3SMCis0NxCUHGRg5nBq3FeFtrBY3\r\noQ8fBi8C9iLLpfRTntUv0JOZT2/RDpVD6qThkAnAwvFPkc81U+/5d2jL5WJ1\r\nfAM5VZ++R6MlPI4QJUH64gJ0qAx2yvV08ceXdsKq9iiwNq9snn1fODCPE3vW\r\n8utu7acQFbG/Gt+WH1gSgaAqFQiR9c7V77E=\r\n=h0kk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210211855.0_1666427000769_0.38244710254752934"},"_hasShrinkwrap":false},"1.2210251605.0":{"name":"@bentoproject/accordion","version":"1.2210251605.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210251605.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"a1f66509b5a6104dc33409f285dac1ab133942f6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210251605.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-nuSQSNjGNbvw7uJuMJeRl1WJASWb6R8dQMIrpCxgZ5J2PgWCl++MHnAMAvP/CrZj+GC9L/6abUmiAnEuygnp/Q==","shasum":"fa383d60727705efbe6e6b0e1221b694a9661c14","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210251605.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9yeknf7xrEmViNjJwn6rFEy/OecNKwv7D5dBVOHjPaAiEAqSQ3DSO0/67iAE2v2dBmTZcwKyPbCWn6/faWx7cGTUc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWO9PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrs8xAAkBwJ0SDBkNK7gDAQscllGzP7dRhrflNSu8fpMCkXZlMnWsaE\r\nbRgGBL8XuJH1PbXxmd8ripxp+PWGbGFJxH3PFJWKlePu8YwhmvWbxyL21B5h\r\n69vd89tA0SqwBpCfc3yt5/BFnbQxvnGVwluKYsqPByFGYN/O9B5adjsb4Jt8\r\nbceW7uvT80mQDCv2m9imDh+nO4w2S9R35Gv7b0LF5ZcrCIisYXt+1hni7qU+\r\ns4RPs+bogOeEw8mH6k434t1BuBfE93gCu8Rh3XLjowwlj7LH1GIzkz861+eX\r\nvM0Ko4TR5MNBFvXxtMyPW9AXtNBfhY4xE/KZuulJs7Q6SQYk+DcFL12yesry\r\nl5pHyq3q+g2aTRnwDSsHm5v49Nj4SxyYK99ccJlNCbTQ1j1xymc7f1fvhrEs\r\nnez3DOzyw9vt+AIevu7TRORdENBp6VMEvHOxnPIFhOoNDWUUjr4SnTLsbKmA\r\nq6bf+xHv+DD+X9pew0VEmkktOyNaDy8ZpWLw2p64F6NmnsIiIP3/f5eE6mAS\r\nPbXD16x9d5q8OhilAEm1Tq+DQBMWqP+KCwBdxEmEoEsxa2dDQGkb8tPp+3yN\r\nDd3s6NSJV55TT544J6hhCDrqeH5y3usoZxupIH2iqAnL96Hsba9HkQoaP0JF\r\nNI7/7YbZm68kGfqAIjOOKOTPkbmb1TNdE/8=\r\n=S3Jh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210251605.0_1666772815093_0.2992064655239963"},"_hasShrinkwrap":false},"1.2210272257.0":{"name":"@bentoproject/accordion","version":"1.2210272257.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210272257.0"},"gitHead":"9664ef260a4ec8fcc997a65025bb11a20fea937c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2210272257.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-EBN6pALSES8/ZCNvd1r194G36Lppa643Scou9QaaHfFgGbflEjRUduEWhn/lm6CWKQipbtnAmwPOgqEj+psqTA==","shasum":"04386a59c63723cdbb59d74254eb99f268135c73","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2210272257.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAG584efzX9LwLZdAXbcV/JjtzFQsbuCo01kVArmOvKgIhAMhXcIPok8zO9B6neS6Ej31IsWNhPX4+g2tcALFfwwSi"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW5IIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8uQ/+IEFRKTxeI4a/2z6jm6tdNKHPelPjSbzN0umVzLtY/XbswGDF\r\n9EogUSSj2ML3/uyez9j0SKkE/tNPNPMCDVpZuLYnYqWATPLakLCmZSRyKrPV\r\n7y3Tfz2r11eNO/m/nPDmnUqTZRYEYlJiviOT8iQR+F8XkWiUTF9vWyTOe3Sk\r\nwo6NLC/r2QxehtE8G5chT7XIqSqTJ1g2MvInZxF8/YIyjfVcsAI1P+vQIQEj\r\nQ3BYUbbKQjPU4IW0aWNobFI4B6BJAMh69TR2Dam1XrXVCQmb2zKdOYpXJpdY\r\nStuxB6q0VNXfpe9ssewA8LKOnrOW2ZeycwU//AKDTZRjIBY9JmXb3yRxfF5X\r\nNcajSAkfb549Nyf+8LkFniEduWRho4XxuIRdhaUstk0U+J+4FvL7WvX/HV98\r\ncooy5Lzv0BQRqvtb/QHzrg2bokVOsyM83hmidKzxWfL0Kns1ifsPorApvQW+\r\n6/fKtOx3OfcqU95mXRpmJUqM1xRcqkNx0YPOwUBE9gcgVVBaWMSZN3KFkVMf\r\npwa9U+fDlw9XyTJMvWnP7eLoIpI3f7qHnk4+dBYfG2ViKDwhe0EJ67uW7yf9\r\n1fJw2uFa/CAhYiu019W8WlMVpCREgyRYmmkNyxeTiLy2lyxz6nWW2TindLqm\r\nYV4S2SEhp83vyU21hahkLbK3M8Dr3QehseI=\r\n=JzpY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2210272257.0_1666945544333_0.570508715176608"},"_hasShrinkwrap":false},"1.2211042305.0":{"name":"@bentoproject/accordion","version":"1.2211042305.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211042305.0"},"gitHead":"592500a0e400703252086eb8ab7b1cd46d674ff2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2211042305.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-gwuoagEKiwuVZ5g+UE+lnajQW5sJF/V9tmvcLt6BqRDL+VZOnGouvR7ZTXcWfzUALZuM0z9wCuUkzVPJwzaL0w==","shasum":"cdd77cb006b5b30f43ff8c0c2982a85207a537ca","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2211042305.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUQKY30zGb4zbY9ms5SOtr7eYpRPvtM8N9eEmJQBYlQwIgG/oq9at3zPvfM2DgI6I9WtXrcjEaYGUAooZGsI3uxj0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZh26ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAoA//cKO6V7e8dTsGad8Cxmw1N1AVo0yonaLCTo8y+ylf5QWILtXR\r\nq/+zZE67WlugchEz0bfV07Ws7PbEG0VX+X2fGzRPLZZTCe+UICTVzlGT2oHs\r\nYphWdAHkQJybKtZ3sqG81X83xzwxYNvsiQMGMY3SKcJRCS5brpYa0kO4oSQm\r\nofSI0OeyQCyp4Dpovb8TkyHNtRt9ZyR84FQqAYzI754hx+61mGbRZXaeKcev\r\nhtG3bJ0XUrruU6poHjhTEOjWDixiWsTOnW3ywhVV93xvPIv7tXt9K4Be0RbS\r\nd0kQ8Ti7HvSlbWUX2hllrl9F9j/MT0t4Cfifd16WEsjcC4LBC2aE5rEj9hH9\r\n2hIH/YJ/1N6sYvdKjOW5uk+q9nfkGIU8lmrU5cCGKwUPiPxBR4wOL6PeMat3\r\nC2uiq/EuvjG2xbcIPxcjBZ8m7c736lNczCY1poWKef0EfUKZNwuiljcuyymL\r\nnMS+W7MOUgp35cDroNl9A2EMeXznna/+PD5pXYkSTW6njVayjoQJ6hCgmUTr\r\ncFynC7H+J6YWIn2/RwOs/737Mprz24xk9XMJq9zLBoNoPaVWeIJlb/xPXsY4\r\nyT6CUwzbnE4F5saK6wAxZGLY1bcIqC88aM8Wxm8WucJCxmo+mUaKJEs0ilWF\r\nEfHkbtP1b18YX5dX+iXEfaNHO8uTX6x73NY=\r\n=aH7u\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2211042305.0_1667636666461_0.9473896107828648"},"_hasShrinkwrap":false},"1.2211060024.0":{"name":"@bentoproject/accordion","version":"1.2211060024.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211060024.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"f6dce0a3fbdbc90de3eb1773dbfc31ff1e476460","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2211060024.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-i2p463uxxGUBBFqBt3SibwH6TV1Vv99getsj+nuNCReSB0mh/v66yA+SzktVT40sT8MTSqZfjCxYtXJ/cOWhuw==","shasum":"61e0e32c4e52b333ef5c245c16833e097ece7cb6","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2211060024.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDO4tl8ZLuJXBG+1c1FnzUFFiTiMEMEooXqSd76yjnhgIhAODDNi1AwrUpzVkxNbxe1Kj98o9mSbWwDGi/aSGWy79T"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahJiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmryvw/9HUtQMsRIVk1hDNL+jnF8LqBYf7NBEuZYuHMFvCuawuddSO1o\r\nOXSoq1lxm+UkcpM7wm13Kfr34DzWCrQ4wReVnDtvyA1DktSyr5YySJ6HakMq\r\nusNQrdEPNQF5I2AdHCau7fPqRYjOH18GF3EbR/dNq6ga6Ie3I+5XDa8ShOZZ\r\nl6bsYXr22UWgV6T0fQg/N69AErGDTwd1ig6w1j9amKqB/Ws19meeF1CkZY5X\r\ntuWexJiADY19rtltFDqbLemHNkTpzrZ/6mDlJdr4ExswJka+lhLq37mqcMLg\r\nbHUq6oHqhKKi2jHEhDBOvPS0+ggnVqZwoF3qhPlU9ALpyBxsFTJn4f9a4uBt\r\nmyYKkJSd/YnhX9Y4CO9kTbFLEGPxrp4aij+LfyDpppzRY4zmfPbfWTtLoEWo\r\nNtoCi7I4N6UKzG/UUyIdlyXm1Enah8GfveRyeTc75GhRbL5JkZWTZvTGu23n\r\nt1/MKIGYSg39H+0qtFarC1bCgW0UwfhGDr97N8hYUcG3E7Mpvod0EZvTWX2X\r\nPVg9sjC+NcFmBWgyarAkNmL0rPINF9yPsa0iJG7PdLChVg3oR+Yqt6eg/kPm\r\nqVaa59n+kveeTVVHnHJQrrUwrIj+3/GAmbY4juCR2lby8CcHcEx6JqH+vhVj\r\n881XjdRnF7VidfVlLweb1KNdrtiPsbRxtqk=\r\n=WI8Z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2211060024.0_1667895905899_0.9788830193096831"},"_hasShrinkwrap":false},"1.2211111611.0":{"name":"@bentoproject/accordion","version":"1.2211111611.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211111611.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"f9c1138144838b5c4612a779bf407d2b2413d105","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2211111611.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Jrr9aOzSuQkAJ1RDROmqusjBMbI5YBNZB8BRkAeiCXk2lvEOXydjVyOahAb3j/CIeWjR3DszM3nvY+S6RlJBhg==","shasum":"83a82c9b4d10cbf1ec78805bec62783c9f25a02a","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2211111611.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC07PwZpPXoO3cX3DeNhmXNhm02jdgfqld+Ax1oF9cUEAIhAKs6yIuo0eDzZwwUAlWWl20tgvqClgMKALBYFjAqZr9X"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjb1gPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNVw/+KwVdVsGlWr6CYnXYE+7pdPsirxsw3qj/+GcqMQb2iSEsVhlk\r\nrLpNztqaHFxiMv1N3G2vCE12HxCKSRbHFCjmvYKBRMasAbV76+th6y9ZMkJU\r\nwkTV4OKqZ92LrKKA20c/j8o+TqxBOGgJezGGBfOjd0IOMLcUJUQfZl0bdx+3\r\nCAIKbSisZPzpJNPoh2MlPHBIalnibW4iIFk2XwNTmLFQ2Uk1B3UFFqNB092o\r\n5FoGQ2AZC/iph4JFDGmSkTTV4vme3GtXSctw++jqYVDjEZhx1cnO6qiaC8Ww\r\nFtFP1r9No18dFYuoZjRRUCylNbraIQ73ORCzwurqOPZS9Sox6uURnf6rDN5J\r\nLXW6wn2fRDVRsI6oDTdFyMSUQIitIyW4ud3DmKjjlGdtJ4iEunk0xETslP02\r\n9kakjgbfPK06/mk+3QuaVgK1KyIOhRW6e2hYnE0x7ugB9JcVGmMZG2VQqvMM\r\npw+P3kHlkGysGFxFPWgoOoFbCQf3Q1XpNdD1/WPvhd8tZn9L8/R5TNpTfEYs\r\nL15IZdZFiNi0IU7mWT70yq46sa/7WgwlwXOf86sU8QBUJ5HatrjO6Ii8qUFc\r\n3fz4svV9S4+8/u3z1u2qeBopIhKycNYtS13gxXdFgfhjsO/DGibvMOLawn7k\r\nFPkVb37XDzotlYwtQU+jWdJlHItCMeVCCVc=\r\n=Gw4x\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2211111611.0_1668241423473_0.39948925689228565"},"_hasShrinkwrap":false},"1.2211151402.0":{"name":"@bentoproject/accordion","version":"1.2211151402.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211151402.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"db41c24bd071b6322e0a5188c4bd74aa94cb9d5f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2211151402.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-6r1o9dA12J5mrB3SX9jrVa2mJFdcHeUKwjUmjvnyLSXEfLceSHMHXx7ga5FHezI3bNWNWfMKBu30S0/JDIe5Jg==","shasum":"63b8d5ccfaafd1ed4e2c5ce8f811ad61bac23b87","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2211151402.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBoYpe/BtfxIEG5SmhmU6LAtI5JxyMj5Qo6Q684KQnXPAiAaZCf7qbPnyXnJfRZIde+faCBqu3x5HQpR/NYTlxxlQA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS6DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMUA//QeuAJqPgksE96T8Io0yB6esSSyFww3zTQTwMEmxiuYQxqCW4\r\nE+ey4LRkWLAotN33EBSA3uxoNq97oJPSM1CfrQ4Ly9aJYDw4RNfxNJSjatcN\r\nM5qW3XeGO7vDRXf2U2NGVMb5x0rckqCIlu7rFDbRo1NgDTHJg4dLWA+xuBDT\r\nCAHIEJlZhQx37y5ELjBm6n60ZE8LfUgAGjmCkSktZuI3Kn63YCZs5i84dz3d\r\nSSyWvpQFkbUzaEeBopOtLetS6un1eMBA3r4UtC3BgM57rPUcfYo53ZBooobM\r\nPXfewZfnjWS3IY8SZcg9s3KKU1Xd50WSffgC6GrzNp3PBkjhuJaKTDkrxWDK\r\nsEmYabesxEYD6eXqnbTUHjHNq/zX7tYXqrbQ4NtxQvFvHMNIytHoKCfvvj4w\r\nPYE9qAwebu8w4SP5Q7buer77f+Ys8qNN2HS6VevQYoTA3YXCH5PZuwgA8X1Z\r\nK0x4EDa4APBcF0J82gORdtjGO1g9RPJKnioZJ/FGg5o/OB4q82UX/1dfL+y0\r\n2l9DlVfVpaYJfd0NPEo7JrqjmDS4/ztHLKmdiornRpzKAXI9IbTBkBQy6FDs\r\n+/hCZYDEZ9Ss7YwhpH76zg9VIYOv01WvhtQvv5cv7mjWo4eH8uJ9TR499+ZK\r\n+LjLLqN7eamS9ztzMjMKxUMe+KvH8t1KuHY=\r\n=6h6w\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2211151402.0_1668624003137_0.32659433422565476"},"_hasShrinkwrap":false},"1.2211182146.0":{"name":"@bentoproject/accordion","version":"1.2211182146.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211182146.0"},"gitHead":"d5bdbc6c36475eb2c4c14f2b02a112669f244641","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2211182146.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-SVm7dxLoiQ0POylQOi+ZH92fhubG1tlXgAc0FWQINg2pxoesdhPD71ZhjoWf35iiGuHAbLedhX7gPb89Fh5XOw==","shasum":"a73fa4618f1141873c34cd8ae9c0bc534d338f2d","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2211182146.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTU6Yvk/AoN/BLGI0IVfcem6Rn8bhOo7KgHpmZpstYHAiEA5IgXlolaq9JIEeAIxYvfoFNOPG+UheHZt1nWyQ9bTn0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJLoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4DQ//SNbpnVJ0ZYu2r4fmlb3HnZANPat+XfwScRXUoLr0+x/hUdBp\r\nf5Kk1pCmpFMLGjQuQv8cuTYaQ44W/TfqqtXsC7kVPGGZyk0rwacYheDBuWiW\r\nh+5kCXkkhuWzrMfGo7FUTV/ba7LAtvLtqp6FdCZ2ggMnIjAsUJKMl4k1ZXyF\r\nbHha4ABxxdxht2uEPod4KY119Ufgli45fOzq6vHBBKd6GrbhzhA6hA2hOzBU\r\nPNoNVlKEiaXtltAVqiL4Yjdj49vJ48aefWYsDSmIofsh5S46yC+iDGPsd/6y\r\nU38NxpwKkDI/GQbXn5kENBM2kaiv79HEQIoL/ybslAeM76aWkpvKOJtzDjNB\r\n/tNgAC4iiOKzuNIy7W6oS9ORCaGDuH+Nr+DJgtSCeStyQ5iGtppoa7K7BZY/\r\nY9Ceu1tCj0Ys6hlj85BTIyJwytFjs9xqR1j6g4X9cyccARgwxOezqR9lN/YV\r\nWed5BEsXNhNfEgRWs/PKJDBkeSlMVKcJkMx9D7QKzWuqpfUpUT+r7sjcTePe\r\n5vUJCrmVhGd0FNPk0IgnHWc5qWtr8BG/CwA1WToFFxfR9lQR/gvkzSffLsRB\r\n8h3Ftn/GrPF13vr0QQdnJCSuIErDOUdrYCe/tjHMgThHOSQY0BS83K3ltSvV\r\n5vUdgG8Zo6mtwSe1e3psgXvBwtRHeSAW4KY=\r\n=ekSN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2211182146.0_1668846311815_0.2449315633706215"},"_hasShrinkwrap":false},"1.2211250451.0":{"name":"@bentoproject/accordion","version":"1.2211250451.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211250451.0"},"gitHead":"3f47d465c6e6f4ea83045b32b2c9f56eccb943e5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2211250451.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-W8dpsI5N4EjLiwy7thxHqOd0M7oWOIP2x1FAjxJNXIYU3Dvf8lAVV6H571CS4TfxtfDuo11MgLFlcdpDF7iuVQ==","shasum":"7f741212b8539852f5b7843bb8c1333dfcd24685","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2211250451.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcvI4rZq2udF4k22XJXxJPHEGhJSvyUle6BDnO3hpmtgIgREMHZxrGQEoscwzogJgJWnecKQulaHYEC2f6Mho84xA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjgHuuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowgxAApRON+yucChflEDqu0314XcpX3/KvSIAReNhbjNxy1PjvC7Qj\r\nDmWXgUPek2mnKJc0+y2SIIJSnaqZbuVMg0S02DiBo7defsHQ3OVhd4DPKCxX\r\nsOO2butpKbGhWFyiogGu2GQHV9g94Fb5qrDXV9LnNFzOiGv0SLMTjlRvDvuo\r\nW7mj6VJQqLkhptfqXTSTKQdY9tDB/yuHblWIROzp/tU8CxA9O45ZSzAMGf13\r\nND6OKSeYAk7zv0QWHhe4qVxiFq1jeIROvioYzfkeOC18MOX77wLxwmQwwFsp\r\nRlXZ/3hKQdtyCVtZaEnjemPyMwBQGo1y/S00roJOr1hUEZf5oaH6BBpB3oS0\r\nKL13MNln571fh2ZoLb3VL4VZTt73ZMADj9IxelzuGNU6SHW49Rp28IIMm6m4\r\nVRRj9fGkXXcAPeo7N4/bMBVzZsHxI+9PWGtniY8ENgOUWrJUc2aBCSxl0fmE\r\nzNOe2uLLFgigWbKBlAlCw2KojFKxwEkAffOTtvDSpIpCSFcyPtZUwhi7pxSl\r\n5VTljsREjIkqTU/ucLBQ5Y0sPrCArqOsT+AhasjeIpMuwYI0pZ2kLa6abkJ8\r\nBLcvC8obuIa1qjUBEIauJBO6yRjVH4qv0v8SWTLZElFTA6SNCOhXj6mJHM/p\r\nAdNfksbIbcE0K2bVCfYTb1fRM5oB+QIjgVI=\r\n=e8kZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2211250451.0_1669364653780_0.20876305636799475"},"_hasShrinkwrap":false},"1.2211302304.0":{"name":"@bentoproject/accordion","version":"1.2211302304.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"8ec16ecf1bb95c1a6368ab455a6cfc7b1caddc46","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2211302304.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-c9ctL0ECutB6XN5/GFZipnhLyae5ilJ9X2V6LZN7wa4PhfaU+ea/TZZpBHEy2FbAuAOouS/Ml+Tg/+4DXsRGKw==","shasum":"58d2ea980f8f9d48e6f3ef71655c22c50f01d2cd","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2211302304.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgXNegQZllQMaZON6e/6wWsYI0AgcsRSAKSgAXAOWg0AiEA/2vWNsq1iQyAA7Y5pOtJfEBPtogi+HJB5fOP7a8HLQo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiGSLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlUA//Q0a8bexVfojJuXs2f3CdhXE6VFh4w7VIfgxyY7LCmlsS2XxN\r\nmSpHFWIPhct0mlZFiyZSiZpn5J6kS6bFSKCl4/ed6Y1plAcjIMGywhMCFzeE\r\nlC8VPSHWOQKwl7uU/2ueZleIV9AY2HEjejJIxeRYvRWyVasTfPMZrAV/vicL\r\nwZGD3mXhff08woilL4DfaHpUKU0f8QaL8kcXm7QP+4Ulp5ydtb3WeJgE/qj0\r\nO76tx/9pC//fhv2sOJR6VUwgNGf9qKg3UeDCh3hPn34qnw+p7OsgX8M7KZ89\r\nF96hc7K7jphAoHF7a4a+wYKtz2MwbfOEL+Q0dPS+VkxZbj7VYsYW+4ydNWh3\r\n2n8p4eTWEG/4GVcn5GFvHTgOUBlsqgCMCPAcnAsjWjwfazyOIF0Fpkifher/\r\n2vh7p9/hXzeS/2QSM9lPC/4BuzNXHnWasIBGN+4t0KRgAZvhQYz+RupBJvZP\r\nFR47d4e6xYbhVi1Dnum41mdIkVWbMC1NumFFYUU1LbkvJL8VFxNIewKJoqzk\r\nlQfAHzevBVFvQIbcoXETyuaad5tWu5dTsQvZExWdf8qQj7Ncw4MuOKfk4nGt\r\nIAvlJAsXVtQIjWVFFfT0cnPJHVR4xf8z0qRq3XPOkPVx9eA49f+8mpZhESep\r\nyu//RfQrOC3u8+Fpc7K4baavtaH7cNenk70=\r\n=KWIQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2211302304.0_1669883019559_0.9863921479112379"},"_hasShrinkwrap":false},"1.2212071834.0":{"name":"@bentoproject/accordion","version":"1.2212071834.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212071834.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"9e7a659da459058028a29b649ceae3a2dda7771b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2212071834.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-EuV+CVeurmbZ/Jn/rO/FMBL8AaBbh2x+TklUZfSXFoeTHLb7hDIt6N6gvG+dkPnu7PcTsd9c4h7Lj+OHoPjvCg==","shasum":"0ed2616eb43e3e57ceffbf8484a3c00fa498644d","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2212071834.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl8jK0L/vPuPV7cFvLjxLfWPQT2PDdcYp5WInzeb4yvwIgRK6WtCwwsZUWpqqliz6H/mWvE8NWNKFBcAH55FkiY80="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkOtiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp96Q//eWE9Ffe07rvBIjNtCMYIjPINS7vVKRjii6v6fHtGIDZzIcZy\r\n/vUfuB1AALJPi3o2NeQa/jOgLRX3KyyBumPx41W8bVcRbln57atunFGaUyaG\r\n2wC941+btZoQXFKFuZ5Tbj/pHUcoy5my8VyydRqvGloQCj9Vp6OvGEItjGdK\r\nLQUn4qXTqQdkTlwZ0/VBgyDeEZohIg7eM1TWYY4IoFzgREfrL03f95fxq7T1\r\nWtsRcNoNyMd58V/3tanhTX8XySGe+gUk+tdgsEcBUm++9rp+hmXhlhOKGwYf\r\nGpeGkfYfkOntPX6cluBuxNhtwvrUUvdlIrJ8Tq+geOoXtr/2fagu1abO7ktl\r\nZA18D3IHXP366oQoaKsJmvEZXvvznNuffay2kPL+gMd/r+Vea+PZyfxtbsmc\r\n+jv4CRq7gHp91tMqCD+jhKsjRIEW2ej3YfSlwFzRdBNW79I3fCZJTyT1ndQv\r\nmcf55N5kyoaHmPO4W/iBqrqecdpz43ChPY8MkaBmVcg0B/9b33gLe1S91HDO\r\nnsjvrxdK/AdlRQ0iAp6nkfUiUKLIR5Q0KB2eHG/IVHW6s+iB59PGM0ZMhRIC\r\nBcQ22F/Fw5rPPqNhybK33mQq5YSr9dQndUcFw2ogCb8neSpZv25jfIF4TTsy\r\nQk2Xare8cocgiQslnn0jJ2Jsb1W6IwPWAvA=\r\n=sZ1a\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2212071834.0_1670441825837_0.29453506651343364"},"_hasShrinkwrap":false},"1.2212092023.0":{"name":"@bentoproject/accordion","version":"1.2212092023.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212092023.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2212092023.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ZXWKQgjXieDY6QzZF1NBgq/R32jXpu5we+fQoVRSWu8kZWWACgAZ4r1nhQAtBuCeQcAi/Ff1XSXFzvpNZEKfjg==","shasum":"1cb0ec5514ce203d9ebc5fc2988e6d4fddd44085","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2212092023.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKzgGy7dqeXBstK3+SABRu+4gnoXLwDeq6HVwuoT0psAIgdvWHaYCVZeiWv73mZ/VwAbwO+5H9IDkGkWW1GFmFTI0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlEJdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSwQ//aUEkTlIx6HRpNodH1OVS4i45HrcdnOBMUWYXbIX8NilVOnMM\r\nwKPVhF9cIkRijVvIT+ahUOR+2oM6qbRk7i8ZgxDlSGZhLu5jvnGySTI1Ytdz\r\nCSAEXIi/9WzVW/vUdNPkvcE21k7p+PxZ3A3XSDSuqig1JxYz6G4s/1Ouzls+\r\n9vzoWALKwZWWYNKJRpyiE9AofPHrXMfv0x9nIMkabXIBCjw65E0DN66FxkAg\r\nkk2SjC1SYSTR8j63C/r95BjI8GbaGylxKxbdIEkdcHxxhlDXwrTUt8ossOfv\r\nzyoryuk8CkWhcwTjjQTERDraPeVpXUKFTdfaDopn4TYD6jYcKpRdnlYmE/s5\r\nTKt2SPITHpUnNP8uJBHYo5WQ5Tp1ZePC1K2R1w0m3P/1BNnVzQXBKIL1UjE+\r\nlpZNdAESfrUe1YxdDOMRf7J6QKdogrcXvL0Qx3fKhyd/tKh3sf9HGy2GA3k/\r\nnqxFvyXcnJWr7fd72Mb+MEj11eM3xN74Aro3XePIr6wlcLhreHMyrhOiUo3Y\r\nyPBfQ5VsfuSDi27ayhwqbeEm4ZqXSjDLedj56OIvq8EBI9kHP8PaK/oyi9qL\r\nj9hgAgp5AoXMeeyHqMgQ454Gt0YLtHcweRV0X1bBDzQ3df9n52j0F4QvxBSk\r\np/p2biV1mlrwtl0PFOXWqjDMsM73s6qpRD8=\r\n=jjF/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2212092023.0_1670660701304_0.1930300750890095"},"_hasShrinkwrap":false},"1.2211302304.1":{"name":"@bentoproject/accordion","version":"1.2211302304.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.1"},"gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2211302304.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-rXm0EteIvqrIyc2Wq3VgvHTw7GpH1oSpy99h9V6cb9S4f0nh99TG07Jth/xzXeZuUV8QCubpRERGeVZvtuOl4g==","shasum":"a167b34e609d7df2d2cd5ff321562b4ee4afb55b","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2211302304.1.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvtBJuhaJxm46daeST3xuZxTvlOCbqyLp9Yv0K1mmkcAiAj8jKMSq8gHphxSVtgn70K1kgEOl91xzSGYkMoML3uRQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPRJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBpBAAiaJeiBQLbV0MpeQb9Vio+3Lhd9cp/OdABD5Yb2Ow7Uem3FJS\r\nogyCGk8qUdhss4xAJZgYaHSIrEg5K+PrGcqwbwjTPZqkzvsWXTgNs/ZrV8Ut\r\nEqiMq7XI0JapjLLqrw0u9AbZWhsLwC05qgp0iyZLLDERsCU5azqkyAG93vvC\r\n3FuhXPz9LYfUXAMDuiDKv7R8zcKrG/+55RmRiWG08riYCjwurVZnXLIu2Ixg\r\n58ndjhhsGxoRWmTD4GjBOAH5vVIhY+vJkNSQdHoQAX3wdlRty0jTc3nc6ayy\r\nSpkoV1gCB31VSjxE3aCrQqg436r1OdroF0LTIH5RTQXYI4D5HcNKYFKFeQuX\r\nvT89vIKf05UtRW63JLgcd4eIzg2ehgLZemQAmhyl17/QuXI0xl+wAnmeT4se\r\npKMkuDmQigSpvBZfosx3vMSHggza3ZGakz68Ab4QmQjs7MP3C4+TxiMdd5Fg\r\nedEpup8Sfq0tTqSD3lJsNxVTYRLgXh1/k5WcwpiHe5vqYV5/uwy7OXVkAJYi\r\nEm3fE3OdGoYpJVoFTPT5JiyGb7TP3h6ltDm6kdvuSKSKKBvfOQf9R3Y+yV9y\r\nFpNezeylwE0Bqni80YyzfacPQFgbxB06b53NkHTm8qKV4jjlcXspQwFw+mRR\r\nfuPvT9fZF3M67RSwUPv8X0/XJkMslHY14DQ=\r\n=mk4Z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2211302304.1_1670968393310_0.8170671279712312"},"_hasShrinkwrap":false},"1.2212151632.0":{"name":"@bentoproject/accordion","version":"1.2212151632.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"6754eb8b2feb7d6eadedb57776b91613ad5d6dcf","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2212151632.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-z5kWO2XKHGhBcBnpQANUOYqelauo70nCt6faxLwMsUYKqCwHIHuNi4dLBht7JCITZSjw6uC2OZwl3dpjytXKbw==","shasum":"fbfde2109bfb9e849e85fe1873b7171f2264d197","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2212151632.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDc/5S94OvJudF8xwClJdQKpt1v4hoFD+VqEpzavw28hgIgFnSCbluUmYMKOzfpzy70xneeIG52b6xRMfM66TpSsxk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjodoKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMAxAAkMP0ObJqkT7/pCO5mJSmTcZAmI9Fx9bNG786RHrjmKgopDR5\r\nQjOlwJnEkHD7CE46YbyJgRjLSx4PW/FRgNO5kU0G2Eoeo7B8Ap1S8Cb/qsAi\r\nphrpWULwwuFGn0/x/bLZR/R9o+JF5v/4q+U3Bk99osSkCH3NxgIy6DA9uBkS\r\n+WU40LLrFXV+UrX4NjQFReYu7IFKi3Df51lTyUts1I/DMV//ltWIwYjXyrmC\r\nK+GHkQz/fy7TKfkhn+HHUunwk+an+VLHuK2WjZOa0j2QR7gVZSnY4BiWKst6\r\nwyYAPoe9YSxk+JhBoyrpUdCBb2Zxl5ZLdFQv49HOqyFycYDUuBFu4eTxz3WA\r\n8o6uxzaCCt3HU/FN/8eKEE/1TLi92alsrSl16gTuWZqX6rRR39o+d3gRo3Au\r\nSnMpAzELBPwoZbMNllf/dQyRsP+Hz9ygBJD/vLJ+42PsOSwl1VFafrTJtPZC\r\njzqMPJ9QsNv0TSarwZxKASbfg1AyHKCkU9DXh2pMzlBd9gwaLoQeCMlJum3z\r\n5X7ZLmfYOeWTIqTbD9qeyU9U3ihvYbjXWSCimWEfqlDTFAD0/lB3rn0hID4p\r\nEGMqzqm2lRlCzY5Xl6eGv9Xt8uvH6u2pjtkT2UM9gopBu/TWGaYiRA+r241w\r\nLW2o9JAiO/niIp+zcNlyLsL+VbRk+APqSTo=\r\n=YKoN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2212151632.0_1671551497937_0.7208299488291776"},"_hasShrinkwrap":false},"1.2212151632.1":{"name":"@bentoproject/accordion","version":"1.2212151632.1","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.1"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"0daa515ff1e284cb2e31dc8fda7f29c073e60b60","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2212151632.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-YJnQqI7ALpj+wp3Puml/fE/BqhrQQznSP+YnkjmB6E1rNRWLTZuXtnjPtK1tUSQHnyhleA4f3z8Fotug+jV80g==","shasum":"99aaee577d097cb94ca6311fe459c48f6bfb2b5b","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2212151632.1.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHMvV6s8fQpddHFCeT3B7qcqe3SV/i6gAT7Y+dn4tVBgIgJiH8e6/xDjUEtLhG94eiBlDkycL1Ls1NDuQfJpr2G5M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjohZ0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFPg//WLd3qkx8Db7EPZFxRBKpAByFz7NcpC3DSuX6P8P+cGtE98ka\r\nz85sbvyCcjFWI0+jt0dn8q0EFVf6+IWwkW5KFEX+JY59UB1Cw6Vh+w/3Djpw\r\nRAljqqCabSuWCgYFckZ8Ti6cjilIgz15B674L0bySaB4tejbCukPZp6qNW6H\r\nnmbGDyXLax7BZ9Gl1RFGngfjDH2flNGAiejB5SAYpfUoMES89cUvIpAKyYYM\r\nL015A9O744hE66WrE8wklhNDDquR2wDI2XDQO7pCyXqfvBPM6WbY72AfTtIn\r\njz3GMndTQhixGbL897D0evYHzgwvmnOPzVlTw8NyPLQ8zWaiDdEGmLwOA0G/\r\nKsEh9z9i1D/XApywMjr+6W0pfwvWjwZwrE4Xs4LDuxNfhOnrjVyBpMCOGMey\r\n2MGJrjzq4MibHEOooTSHBUjEoKzYRVySLm1jXcJpYk2144rlkQ2pXrVhpIb0\r\nVaDEf/aSAv3k91NGqL1iD3X9RW8WEB8STbysZzlvMZM0swRKHr7u/J9EB4pK\r\nNVtw87ZA67VkqVLtQSGOHaCryzDBUw68HyF0XYUUYRTK5yGEPOw0sxQ63Shb\r\ny88qTtWO4IOGmDNXnJfO7y+yCqhi3D01g476TLIUgUdAqTVLKdgl+dFm/iZv\r\nK4m6n08k4Wr/GAERHFDAaJm1s6GMiWtr13Q=\r\n=nEnv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2212151632.1_1671566964399_0.3131660427120284"},"_hasShrinkwrap":false},"1.2211302304.2":{"name":"@bentoproject/accordion","version":"1.2211302304.2","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.2"},"gitHead":"910a4ee7a16075d9db8fd2c6c5bfb607f22bf54f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2211302304.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ojsuoPdZBRP3g1jGDsmuX0VwniVct/T8HWS0pfhlh3D/5rr+J6qLnh7XxO1fEDfodeXrk2ANOVMidrN/onskfg==","shasum":"40a5ff167463a4419002738673b95570c4d4bf7b","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2211302304.2.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB/pj/0l6gxaR4dwbNKbs/0o+6VBwHTXPvxSM5Gf5/uJAiANBYV+tRPza4xBXQy07BFD89ms6a9r1fGnqN1FpDZvdg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjojfMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOuQ/8De66RedXCS7eFYywTc/fohKzHG3qkOGInmSExlADMabU27k0\r\nVgWd1RkNtiiPbZ9BHYhg1yg8tKLj8wsKK1wSX1rwbQZ2hYCwJjPocKu8TQtP\r\nKu4Qk4Kxik++vgJrVR8uWwVevjeXfuwV0WEWksiJOeZCgTG7NdZBdlOOGq5h\r\nPkc5imS9fZSuI99EAzkwK0WssW1OZr6Bc1VVLu88tSsf8YZwjqsGHocD5Jvj\r\ndyZ44UagAnT/j9jAF85DIx47Zs1O2kNIX2QQpxCLzhVK56Lvd/9tnvgOADRV\r\ngPyImZ9da8fYAUvRtl8Fr+i8lBbAPq0jLck1ncLeMcR6Bw6N5E+zXNkMFg00\r\n4jeWBUPVMkW5zjQJa7dTAs9zCzFLYy+qZrZXrvAXKZcJ41TG+wBmv6NQ6b9S\r\nhe9HMUyAT4ByrTDU5zBO4Nx/b01ta6Ne5wsz9+jg9fem0exlVVNXiLr7Pkgt\r\ne4FcEE7OE7DG+O6cgVFp9ixMkj0HUCUAwGki+3lKg2gWJum5ZnRUf+HKXd0e\r\nbkKAntVUKwUxBz5y2qbPZGiZ2pWIvgkTgq14MhIDRpfVc1znz2JxMhrSrBIQ\r\nVwvf/eOwYXSRv4SEqAklasqOe1FypXd51gc0P8non9d5o1dXd/pPlwCyQPFV\r\ndtKioDIrlsqX0GBS2EWjcYSqjRX0EU3FojE=\r\n=rcS4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2211302304.2_1671575499985_0.4571354318303493"},"_hasShrinkwrap":false},"1.2212151632.2":{"name":"@bentoproject/accordion","version":"1.2212151632.2","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.2"},"gitHead":"e3ba25e45c2728fd6b1c91daacfcf7d0870ba6e9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2212151632.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ERbaRZ0yvMfuYcCFHxlQZO3DQawrA/Fy7XHiflarPhrO5CsJ0PH87455KVaH9vj7iOnYC0p8XyDNfLfsAphDkg==","shasum":"e30fea26fe44ffae235ccef351ca06260a2e1bb5","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2212151632.2.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBorkuvQeU2cR2myamzbfYzvkaluN9rLqIW6pNQ2IUk0AiB+YE1WFi/hwG8Yq/Hxehn1T40THwCkE4C8m2Prrb8wQw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtG/FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSbhAAgUlND8eSLypSS35EH79O4TLY8tPqfo1mCOooGhKS7tkXyW93\r\nHN4jISWF9sRxvAQP9z4WSSzegQPIrEs+KIGbEVdLeKry8Jf3dPrazpNURGOA\r\nxFPp1JU7MFoH7A6St++e90FDBlkDTTAB6wAlq1gZeZZeqmcHYMvLCKIoVwQf\r\nvAT0XuVoIuAAgnM1ssWJWCybu/Mo/no1kxMC+1lz8A5P2MfNUlpwll/onBs0\r\nugknd/FRCknVxJF3eBM9SeQIRPt9f7qohqD3ZW4J7B+c1Oxb1zeCtrPsqu60\r\nLrhD8iZoTkBFYu9F0Oy0lCcW6MS6o6vBg2BvVVT/J/8WKUqwoiRl4rz9+ait\r\nXQxPPzKVFC2AQfUn0O5CRzwvlcOKvZpoRwxV4srT6Y0ewRxdEsb2U30mCkr9\r\nfX8NpvcxTjIFcMSK/RfyegMP9/EmYx8Lo5xUJIV8/hR/BGHUyP86BF2g56bV\r\nCduKOH05G4qgRFvD3ySzCfSz8jwdfYqFjb6lIskURqkhXy/3j8fywC/TOycq\r\n3rE7ICzMuvvcrbWAL8qNtPu5slJXf+Vl2zhlXFgmP8FAIE3ybL4X5LTCInh0\r\nUjvJFJ506CrJ8BRDS+BDcFZ6lncrEiYczSsBPDVq1LpWiKnpZadp8qb6tqjh\r\nhVQnjTQSaUjH+AdBMMoLkfPeslmLQ3QIdSg=\r\n=OOb6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2212151632.2_1672769476836_0.8557730233680207"},"_hasShrinkwrap":false},"1.2301031703.0":{"name":"@bentoproject/accordion","version":"1.2301031703.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301031703.0"},"gitHead":"e3ba25e45c2728fd6b1c91daacfcf7d0870ba6e9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2301031703.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-9oTAGUQH47YU0rm1r0CPSBTAG6FDTtdtHbayUYgV3dmEBFfGpcJkDOyJYGgUCYj3FjG64zYV0Mv/i7J0OBS0yQ==","shasum":"fb52bd325a8d526378cb660ce17a49f3e9387ff6","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2301031703.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSxkUssTIZtkg8ZiZ6WfnacFUSFpJHGpfZ6Xy4AjxzyQIgT+vSU95/KD79dcwidvS/a5nGkIawP+U5MmENLj6F0P0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtJAtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwFw/9EEfDk/dWG9KsqmQAkuqN7lL+N/VE1pes8f/6rx3VFpOsvmYR\r\nd5CpIj0Q5179L0e4GrP2J7RVM0giK5noz5lY6a+7NGyBPcFIa7Gupzb5IHXZ\r\nZ8eZb2IuOWjFJPX20ZQNlVXEW03RzeW01sVAP9iPawcnfWjQvWyL8fPnbwR6\r\n4CWvAMZzKufDicqmYAiten4x/+NkrjHW4uv3U+kB66nZ5rOAEcZCs/1Lstfv\r\n9ICLfAyDt5y6skyrsMVq9rNJda3ISTeU0DpM9N9nqdhpn9DfuSHkepQU6ytp\r\n+Wou8s+5oJgxW8Pp+jZAhdsG99w2Uc/PllU7XKxVnC6E76pARp/hQS+b9bT7\r\nCHgF17v2ywOWajjUN9JcHenYL2ntqro/Xw80sGH9qabYHdX6slc38Vv9243a\r\nSUEOw+o2JiMK0XljvVbS3etjtMOhrB09EG/ynqZZGy4Pe5WHXJVK7fpY+9HP\r\nUOAeutcqDGfbpmQ/8wfqcfYhLY/C7u5pS1/41/D+xw8DO7zVls6nbsDbRVTs\r\nAb2rUI4iBkGAGsSIMQe98baiB37pQzxHIFgsFMeQBGPXqZ3LQ7277S//DH/t\r\n+Bo9ZDBYfs2Y67Voimm4MJ6Tf7WxXm9mMkSjh7jWtDrJN5RYkFftph+qDpHi\r\nOldihrH/J2azSwZ4b/5SZfE4Cn5SQ7jlx40=\r\n=ZH1Q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2301031703.0_1672777773439_0.7503576953369941"},"_hasShrinkwrap":false},"1.2301032153.0":{"name":"@bentoproject/accordion","version":"1.2301032153.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301032153.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"418b16026c82f72bf8e885668d34a40fe043c9b7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2301032153.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-XqXtU5YBlKzVrrTUknDYBvrDChvt18nXDsq0a/WeXMthWG9/PQdfztksV8qe2Q4iJABjJHr8zrq0kR6qVfBRZA==","shasum":"406d64bc61ca9df0350862c5bb5504a5d839833b","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2301032153.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp0ujaAvSqMbKngFfMHXLwRFMqMoYG6ZqzvyQ6WZCzRgIgbcuuPQO1N9IuDLWGISMbMAeaqs9CgvEt4WsSZ3DdU/A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtTfFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokgRAAjET6K5s8/gclqC+I+lQ/XbqcY26/9mIEJkzscfyzyvgSVnC6\r\nrk/hzWEKUuZ6WzVGYcdTPMfdBI/+e/y5k7tGHYvqiJzI3Tj3i2ZHDmesNc88\r\nZ7tVYSVRbNXjT2n8wXuoJjctvkvx6/blvvgFcTQBquiUnOeVk1bhdMUMjuys\r\nADQJkZg7YQNfO9tXTSzswv+0MZuxJDRZv/LL/mmr7FfwHCGX8n/j0n11xa43\r\nbs0YEgUQi6X2I5/PHP5fmW4W+t4xiELi6Ro0NGpfOxCkyiOWh9ZhA0qA2Ykj\r\nGZlgl2xz3zWmbaecOMs82HKD5zfKTJrvfxWLqlk67OcKHyheif0p4GwkHMpC\r\nWwJBMFLw1KVYOaNYbR2oW9YAQVxFi9NjsIUnVBmNpqLnLNTWeM24LsRjJ4h9\r\nb2u6JrD1VNmU9SHAESEllPWDUmy4FNnY0kl1XR7ry1v+v3Sl8BqRzMN6j2YL\r\nSCWpHOIxQkByKNWMg72sTs9q9dhWHmxdoQx19/fDYk+rhzkK/gSXbOPQViZP\r\nkFZ7oqDgfcollmiyfY5SAZDrdvsqV1EThcjJAGOAbRtcxKnoJsaD1x/cWQDz\r\nOw8ghSxSEQTeoL63Er4i1Kv0Y/GrVkljxd7w8giRX6jPypZszAAZjZWFh61g\r\nZWd397xa6Gz17SO56vFLi8sBHrRbDHywpcs=\r\n=rUhX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2301032153.0_1672820677015_0.5833226425333424"},"_hasShrinkwrap":false},"1.2301041800.0":{"name":"@bentoproject/accordion","version":"1.2301041800.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301041800.0"},"gitHead":"7026aa71b81896aaf30f29b822e1a578138e33e2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2301041800.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-wTCVPr6uAxl+zzDAZ6PauubxR56Rt9MYdnX7Ird1XXfNL8NXcn0E6/NslBnbiSiOlxM/isBVVa3Z7eg6xfPiHA==","shasum":"97a6796a034a7f67ba84e833902293cc326bd64d","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2301041800.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGXXqLRI6M5qlsZUJ4C27wuHR3FGbxfX8HjHyeVZd5ZAiB0AictC+fT6u73MURUkbIt1dXoqPoEe5Kljm8mCisIlw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtoleACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEdQ/9HFLrfVQ6wDg9FBLGO7Z3LaIUTXPRLdYDB2zWmQsOtF22eaCO\r\nWK8fYmvybiAZW4Go9fI3whHbmEVsrr7gcUHW1h6+0PQ9tfY84ocL7fjHSzI9\r\nmMjjtIkdfKRugLjoto+j3OwG1pDnqRN9enqmpIfUPOLPtXLtl/K0kbhD+6CV\r\nyMi08M+CMHQ3/+DSYrDsGkG4v4jCyMTNaSXAhph2pGezbsjtrb06VWfBAEy+\r\nMyYWeWs4Yyv/BGT49a02VJVwh6wuM29EdA48ShVmh49Kgazpl9wUDYB0EDj/\r\ngC+nCzpjyUuaP0jXYpcDhMGMIzOXDjASYoQPiust+m+YvJV6b7tXwj+ARHxB\r\n9vL4HJglmHMLZAuYjtS60fwsfikYYdK1TCrHAwrqOmG8CI04/I1MuLaWho3P\r\nKA43ux3LiLlNvKikenk+7JDvQegHx0KLf4aFAe88Hc0GSOXxPiwdY0GKghpU\r\nXS0Y/Ac/0ZxE+tTQ6KjTTezZSH0SFEEStz1mkHl0swpI+gBSvkq3FwK6wGfY\r\nWVT23lWeEBOVllSsVxqBjYwZXyD/NG63w6ZXajEB/W3UY7V9VUAQtfjR5ojK\r\nlROqC4EnEuNchxuLHSYb3N9uYr++O62GWJfjx1jWps4SvI607HZG1/2bEe+N\r\nRC7+bx/unG9aroJjhaa6pikl1OjqPc3D1Lg=\r\n=Lssy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2301041800.0_1672907101824_0.5383940722060048"},"_hasShrinkwrap":false},"1.2301100345.0":{"name":"@bentoproject/accordion","version":"1.2301100345.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301100345.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"12a8a2eb9a3656064439da35b736023090e7c78a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2301100345.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-WWLrYppeA7Avt/sZ3uM8JzH4U4rOUIRWWh6M4ynTk1PjT9TqyWmzSKtpEJc87aG99t8GiOq+noutQiNhgcsUkw==","shasum":"6ba44a282606add09a70eb6e87b9e7a21f552f9a","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2301100345.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1XsKFmxsZVvptPaqU9GMPGdv5zblaMP74UZF0R8Y+uAiEA91cZyAF/n8x6OWo7g/P1OEOMSWsPEIHnAd6+4AxtJQA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvSDtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRsw//UsDqAwp9tiPDIIwrZwM+UJtMx+EKng0U9xaGxzzbdFlMQtvs\r\ne7hw9TUjsMWtaKUil/rchsZ0pHoAAdETA59CqmnmA8hmxv62KYAIBBWjqLdO\r\n/dZLymzQ+h1m6Q8sFjVMRyg+A0cgvr0aG7mcHENQfelhXbS8GaQNW3aAd2KT\r\nYUrspTWags/2szaYiVHIecgTZn5VEz94kVcha9pZAxb4FJSGsU7xHAnIf66S\r\nY/GfP+w4Wb63+JLkoBiJsFVZcoQK8BjajXjTs1kLNpnwbjnrmncASBhyLh5v\r\nJhhXa/cJ+ZrVWsjxXaOeNloi8iw/X8JcjbYF11kpiLbrDwTTlY3150vvXtTV\r\nlwKr43/ZoByMNS1v7QKZEc8ydRCnsavyM8fq/XB74sQfl6lgTfgmqr9+Ha7l\r\nXI5kkaBjAvCaDezN03igJOdMCoxkNTSBW6TJKR9maQZDCguNNrciR91Ml9Ez\r\n9XMZcV/gVzsG6Evnw/XFu8NPkzAWEYSAMjkDrZfjUhnF7Vw74nkVA7EMpDRi\r\nsJmCcGYdx/kFQb4a05oLOa6A6x/TOzAhAMvTed5FYY2vdvicPyh9sWhG4t4m\r\npicguUlAuBO4BJXWAmfU3gpHSwCYSkqEqwELK3T899nhaavNUeZGWxEV7QPt\r\nVs8Is4LdGyvOyfGaCcRqiUEj7pHI441Nz0o=\r\n=8t4Q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2301100345.0_1673339117095_0.8405035442771533"},"_hasShrinkwrap":false},"1.2301112346.0":{"name":"@bentoproject/accordion","version":"1.2301112346.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301112346.0"},"gitHead":"290809452fa1006da1ea148fc925beb127bc65a4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2301112346.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-/Ae/kdHCAbne7YEVBxj1qpnAV1rdVI0/dRpxN44vLidmARJFff11kHLtF25Z6cQoI21/m8TJG3Eryf0sqErKMw==","shasum":"c00d61b1b7c82ef000c20a0e6815e782acf60afe","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2301112346.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzPsA0RImjhRno0hXIGzjPrm7bL8dPBohvE3y4jjg0SgIgKOqE75eeQu/LlvuMD3J5Dgd4pk3dNXVO0S76nDhYxj8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv8Q8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZzg//f0Nbg2oYJ2DaPs63no3FqW9xasWmgzRT0zbrbERaNalRiUUo\r\nkjUiF67SwoKsEUdoxLEAiYhbWKGcr3v1UAbGdKj+2ZcoMqWjQWfT9pfYqVLn\r\nvt9O5Y2li2EW1GLZ/EczU/Y9CTGIsyUCa5gv3VtqNeF9dXUd5U1j+GYb28lI\r\nbRikAu5mSrMTD9KETedXwMJkleC0g2JtPDVVjhZ0Cxv6vBNV0eRpBtm+2Utw\r\nhAW7yEuQqckC14cmsWFyKYGlg48X8f+nntP/4dB6TyLJ+itu6mBnJcOLVml7\r\nXqnXo206A3iNHLy9X6C72l8fjRK1QeAEQWvMLA5SR7+pWAIDFYy/YqZ87MRg\r\nq8WCy1daSXtC03Dp5hNzilEi4G3EYh+zdrhfpfGrlbzpnWm1lBuTcKWcaQnG\r\nRLk6hDoIPjjOiiAK6O3PyIoLTTXjRcp9AmValW3EDmxNFMjGx8IzTjtlRVUx\r\nEBViigRBnZVYdPEg1+SYTsa9K7Pz7YlIDGCq6JtilXuOnXqmWgl9kCk47Tsd\r\nMN3eAHvQFGnhq+nVkTtE1z2eOULxg9aKIn0crOwAS16wx9h3RmUl8BiM7qB1\r\n77fO8gukfoJyfUYGv5hBe/Pv5UJIO0/fz6zlmbivek8dSNyERCUXqe8ZYAms\r\nYdm3i3ovbtkcXZyDwglIwCVI4K+9pO0VVdM=\r\n=a/H7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2301112346.0_1673511996324_0.13891528090735616"},"_hasShrinkwrap":false},"1.2301181928.0":{"name":"@bentoproject/accordion","version":"1.2301181928.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301181928.0"},"gitHead":"8d4b04c8f4aed6f3fb83e6cdd785a334ecaa8a4f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2301181928.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-iY4zcWmCGOR2vORjaqdYGpQYg59Up5TZmlYGFVezj/6BpyXJsWLo/CX1cmY0q1aeGtbzNTho81pO4+Uh9mfjig==","shasum":"151b4a0b631da65645699b8048f677626beeadd7","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2301181928.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmI8YeZN7D6akJInXIfPY3lrwL6zK+Qc9MzAAcjYzOKAiBq/QsFKTuePr7PRWwYEJg/zdytNtG2uiK6isuAtv+DSw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyP6JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4GA/9Hf2g6XwTwc5bopjG0Ik/XghqFz6UBFGuAxIdhGb4eiT4qXJK\r\n+1F83yXJ5MLWCnKgTooJStx6/hahi4pzWuauf+FJoUBJBaNTtqS8HvCrqxw/\r\nZCSn+jygiOyxnI5bhdqtroPXEphl3xCTvEK+QtoUEy3hS7OUST/fqLmn9p+S\r\nwUK/6YCHuskLcKPvwHazZ+tfoCbjJtgfq03nc9LbRheC4c7JHOa6WIk9Lwvv\r\nHzFZjZggdqASJDUAxha9+2osto2mwdJaPaoreOwl4M+zg/9ipy85OYuCHL1k\r\n6bJwt1xfkditlSpfrt9KtvRzGcSJE8Edsv3UPzRFibJnULY2WqPOUeYFYej+\r\nG3XBn5qJ4A7ztuDVYCmj1iSzmW2lwxgBPmWSAD7BlZpYIThEgOacmkxuxpFs\r\nyjEvSnDoM0Acy5KaNUo2Vx7tKugeWKSuKA5UBOC9OjwzDg6M4P+8GEpuTMsr\r\nNFiVy9+ZiztQXdVWiYsXPV4EUPY1Suz41LUJKh0MBNYnPsiy5VFWlqUdwUN0\r\nlHmo+UeBoUe1EOwMuoLZlmL3LqS/b+EiIg5LYqGsAl39N5C7MUupj/TfcNnO\r\njnBRjxNkVKM/Q9ji6nYaYmWGP8077kt7vJkQX0gm0NGG0WKV7WGA54p0nF49\r\n9eDFmejzJfGZqcJb8UWObwEnNI2GJA/sgE8=\r\n=MuaG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2301181928.0_1674116744880_0.0018189879502967798"},"_hasShrinkwrap":false},"1.2301261900.0":{"name":"@bentoproject/accordion","version":"1.2301261900.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301261900.0"},"gitHead":"a6ea9dbc37fe6d4b0f68e25838c857835dd4f7e7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2301261900.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-LMH1pj+GV6hu/7pnw1E/3xw7IOhNx6yw/hvxjUDtxJ56XRDQuimvSOs59xajJG3iNbatfe6aUDBS6wh+7tvGFw==","shasum":"a771be5793174ca236999bc92e897c0681d6d869","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2301261900.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyr/+lvFNEEKJtxRLxsuL+FjKXh3xphOte+YWJdJ5yxAiASU5soPeb2XFFWIze8APOVl8kxNZ6GOKaLoULASe2zXw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj04rjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrzrg//bnIv7O4cxmhlp3VI0zqGlH4XZMMSHoVniUgSqgbYhtpbEBUi\r\nbtFAZe9fVyVTCj+PWpmoFvXs3j40gGpCJ41fF+4GarIW+eZXOjjOpS0qfDX0\r\ney4EjAMmPt6c9YwWtRgy+fRRn2mc4GxbplyzZR6WWuvxaCoKwgs5a39apZkG\r\nnTFTuOMrqPHfkEnZPBX6vpC96dey7JdwjJ66knQF2If0OjGubGQ7sRUQHN8r\r\n5hPyr4Zvoc+DKC/v2fiYSJOLLJPgDSG0wOj0X1FAG0p1POxQiV/KW8lMHyI6\r\nTElcR7xvV0CC8/jKck2bP9sDmySd8bewyV8/Cl/qpFRv8LYHc45Csg//MThI\r\nSHwfd/IvgA+QYsZkG5sdpBb+PqUBhE1vM6Uhj/FomKYvTmx0CWLgv6f5Ceto\r\nwKbuoShTBdaR7ifzU0uaP+qM9vay0IjhXUI9Ogz5XrQBCEPGLS/2dU/7Cn7m\r\nvxkCp/2pGSethgJVSOe2GP8mnw/5Q/kIHf+QvNLmDho490lL+hd7tho5o5RN\r\nOFfbE4GO8Q7tjU0ym3VoNnNyTS2o9G52lrijbWleKcahJ1++YKfU8IhAAHiP\r\nCgDGEv9U7uA6NRmVt1P94wsd5qdpCzTTnx6BRlLQuVDE0VrLO/3zE/jRvkf4\r\nRSWJiLjs6iJ5HdyavOybbCghFpiNB/kgJ2U=\r\n=GBuS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2301261900.0_1674808034774_0.24538398707616826"},"_hasShrinkwrap":false},"1.2301301810.0":{"name":"@bentoproject/accordion","version":"1.2301301810.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301301810.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"06d7a2baddf76737d7cde110a7b4bb9351feb38d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2301301810.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-h1a5sGsw1H3i6xssqzLqi48PThbpQsBCp3UffSYpVzNQS6v735C/LYWqgeFjXxXHoXlLcgm6iVoJXoqm5pmvnw==","shasum":"aa056747f02152a8be43fbe63cf265f0345fa12d","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2301301810.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcS/j0YvG9OEjXE17CFbw77wLRXqRe1XXxCuAQHkphwgIhAPaaW4wVl/z2/pyzzTSvRxK+AiRzSEjvUDnvycVzqOzh"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2NCFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBsQ//beJbtizks5L56SZwbz5n6cbaGk+HgHI/f+8X67EXSX+ee7VU\r\nz7OHCkRlXJkunATtkotfvN0RDvUPofPnM3/RL5uhJ6AxnEwkNb8l6Nahp3Fm\r\npP15GchBlmsQ/YOLf/hoGQhTHT8ypbuxj/69Pk/+PAoro/3T3KlLOKiSoqE2\r\nfdkPMHLdaRQHA+nl681PsOlw5d49vuwp+6j5hPae2p477s11mBvrIxpiG6Ej\r\nflABbjllpJzex3Hi/2rN5f6wfHzTrpslsGtaQJ14sOECKFhWv8FuqVYdeLqg\r\neVXuhkcOoln20mxzFcyMty1MPra+2PrmX+MOlQZWFCIIS//nCIPsMDlkLMBi\r\nw263qchwv41KUHljYRJU+EFtWlREYgPNjoE7vblIERO5PbnM0dMzWY0tsCQC\r\nBdqPJzuZBIuhWNtyufmg485UStW3WBKqLKmVeFS+pIukgyAEGMC9nfMURyTT\r\nkcQ0Q4igDsoRD0K9TgbVLHzPU3EmWOQc62NdZGN97Eza9r1o9CeUuAXulojh\r\ndCNohWyAxF8KYdfusR8oQH70h5lLNQQiuR5B6XIx/vnwRSiXzBGX4jNGHu/0\r\nAseqrzXQ2BSVfLP7H/8dz2ABNoLOL7doX3zM31TBmaaCSPpGixTv9JcjzPWu\r\ntpTnR0f2XMfxE2XBTJiVIu1ZOssjNdiYNcs=\r\n=Q+jJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2301301810.0_1675153540754_0.49089297573037727"},"_hasShrinkwrap":false},"1.2302012254.0":{"name":"@bentoproject/accordion","version":"1.2302012254.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302012254.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"e4c14ac075b71415995f07a6bcc3ca93a8af5cc0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2302012254.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-DLyvp+1RBMg+mQQXNC7kgvVGLYHS3mXYcx0BKQZ14bVtg3m203bQHBZ1cr9OJpGKCGlF0OQPyQtcpHA2e6k7WA==","shasum":"2da9fdb4dedee3c434453a0651fd7df1e26c10ff","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2302012254.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDilxeZdj5R2ssoQ1ZOTrU+6Qom23LH8sD9YSSXOMp1MwIhAOUwsAWBtrKpPcYzxybHMZWVCBJzxTOeS/0DQbDekWiB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj23NFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojHg/8D11zJy0XBjwSMxSagza50OOqf9zu6tqzHIiruvEciAwYYsHU\r\n2TJAAr23TQsiPa8VDi9dkMgXA7uJuzeP7rhx1JIe9VRID0rQvlczWpXcrMjV\r\nQitpXOnx30s/fDDsTK6D6BbmJGfLfITJiXBUhNO0cB8qproV3LEkgczY4Mhz\r\nYREjJD+icdK1RvRWzYmJzeaiZj7NroZArPjNxsKk1/VCaDjR/c0/Rh2Fijqq\r\npeciLB7jHGB+iuMg9ZasjIxsVy4R25I8oJul+4bSv9i2Ct84tkii7srXaMpG\r\nlZo+SYq9M0VbHmllMXdxLMC7d38bmy6GOE78FglfbfCVz82TOWomIOoiRfvh\r\nWOO4CQH1+AQ3GOWAaJqYaHcYgjUEFeOyYVFvOfIzDPuBAZXvPHt+t+OQy7zx\r\nXgADaeEUXl5856h6pWI6ulbridIej70Tacww4VixL3at1P/TZCpMXkFYXvO1\r\nt2zblX8xJKMtx/Dq2n1TK1UQCvfWADJAxKv/Yw6OWbk1sNYDm3QEUodRD/XK\r\nmXnixIjdoLa4gEUyeGFd1O7OgaXyL0fCl6My+XFBEU8aKAnWcZSFvBL+k8Hf\r\n/ts/vACO2QndU+3U2LWhrSo+gpoz9hW5WUb605qgomlWkqKArOlrMso2lWuI\r\n31+KksjDABwsxN3NSD6lAoSFghLyZDc7Tt4=\r\n=0FgT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2302012254.0_1675326277482_0.3928987189665736"},"_hasShrinkwrap":false},"1.2302021743.0":{"name":"@bentoproject/accordion","version":"1.2302021743.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302021743.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"a27cd72c15b628053806c94efc4c96730603dbd5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2302021743.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-yvI0bpc6vYlz10XUNi3/eAJc2dGYbV0DeXQe7JFEekHzbskLVvHKufft01IPjBQdtKgHL3DbICl8T3r1BD4Ytw==","shasum":"5e7cd7a9e900df143f87f90a25b01818ba648dd2","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2302021743.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFkS+NOoHntrQLhVWj5bVnCY66I9LHeu1mL33AcTPC1KAiEAzuXJE5P2F1wDmnfi9YNTsVjWZZaWnQkh5NxcaH4RkV8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3MU6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu3Q//TODDNNrKX4x/DdoBntwKeqKTbYaprG1myGuQFPG1qPGE+oA+\r\nr9mkyr433SaY9XwBvBV4xri7t12+qPlTWe5RT+Z7CI8hVWvi8LcuQBGTXxJ+\r\nV88Kn2F7likJ0SyfMyM4uPZgDW6sjonlKbzPX8afmQuE/WVbko/iOIy3YPH2\r\nUuPCKgwbmLNv4fdDnmdbc19ngVhdCX8Fk+3pPBadBK0xCJzG3axhzCHc33Lz\r\nBOLyU1X8eKMZ7nA+jXdPtXYzlMKCdxHeBsCFOWlpZObNLjPywtNDid5ub3ye\r\n3dra+eB6/0yy2rV8p/FfN/kB7hpp6rfIP4edWAJyQhdglnY5MkKH9JTitXZw\r\nL/m3PGC/dI4kbXsvmiDRmSI3AxVWA5jrPYHtDhI4TIFXChMcV4nhqG8gzWvQ\r\nm4Wr/LDo1IaVyVTrfxtWdrpuCjJwcFcrW77EKNF9cQBXg0j06H7PQsWIZpSp\r\nADyFz1JonJvJuHXOaDukZlgBmA4FcfMoh/NSg2kuGj/8D0NEh+LF8Wb3QktG\r\nvjZunZeki4c5Py7McUIC7pROnh726DLfZ+2INeZqs2kOHX+AxtQ/5ygAc6Q7\r\nEL67CXu0d516ZMbfKvDHxAObhx3tggccAPGiJ/AjWRO5SNdH40KdN0eUZ9G0\r\nPRg0cCLe3fh/Sw2DdFFRII/V8s8niOZDMag=\r\n=xOwd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2302021743.0_1675412794219_0.7867090121466553"},"_hasShrinkwrap":false},"1.2302031721.0":{"name":"@bentoproject/accordion","version":"1.2302031721.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302031721.0"},"gitHead":"f8cbfb0c4e4db6b8dea923c0afdf75aa7888e4b8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2302031721.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-Y2Vo0wuyXWsZRsivpz9vjlt9AID6fs0Ev4OMiywkN8zsYiPhZtv4nTnNSS2IXl/+/WNVeKLnhl5bUzmTX3U9UQ==","shasum":"13d6d4fff48f3d1a8d4f693add4cf024a16ee241","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2302031721.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkn+YaEdaAIVk/3oa6/Xuk162yZxFDH9S0vye5hi6X3gIhAK253sx5p5nZI3Q34uIBnCrt4N8SrE6hZoUaEcuAbWRp"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3hYNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQtQ//ZpfLXha0ENDSKRZj0JPjQvEUBdFq5vAzHoYs7r7w4Hi9vGwC\r\nJgbgEabRGeh4PS1J7ttxH0V1wgYI4woHf8gLFNgRM+2vVAED1AUwdxyjNQ7E\r\nlFfudMloHJxb6mxPMLpQe6Egt3020jgkyYA6pRS/D1giB4QnNxht5PgZMjPu\r\nxJ8gdpXZW2I1sctLAZ4aTU1ORHCCRz9+Y4yN7aQokG4JGiakDzjNT7apT90Q\r\n4UPwEhgDi1/KJhWOn+1DMhPCT1NzIpQ8JM7S20/DV0m1SYN1U0EApNdFNy/X\r\nmHn7rrOd7JvTxBkBa50NE6lqp6QO6gpkWV0Vg2xWRr5ftuZNSsmRS3N0U+3M\r\neozSOK0UtwikZKAHag//u5hOXaDRQb603OUYkG53KRLzGWBLwquVzSre2nw8\r\nezYG/wi1p1csJWRNVUGMyVelayBZAr+UbN/mXpgyPNRaiIseq+hoHW01wDU5\r\nYl4crnCsgXeWl/CL0MU30Iere0jRLXldagCwp+nWjXqC1oMFn31jCGKO51mN\r\naeymOBllNDO9P77FcBOAGq6qfDi3fhA6vykoLm6Fdt7DaFNUSWIyKP1okkca\r\nA0wamu+pPnb63HqBsSaViYG5bWD3IvcCKboiSpRdfDWDmuYLrtdMxH3NdWii\r\nyHgWTmXM4lD4D6nKDWy5qU0qNdYRzsghVG4=\r\n=FoZ5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2302031721.0_1675499020994_0.04939768369084718"},"_hasShrinkwrap":false},"1.2302171719.0":{"name":"@bentoproject/accordion","version":"1.2302171719.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302171719.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"767b9ceecbb9759948c2b0db6f66c49097659f98","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2302171719.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-acWDlO4WZwXobgND+OyUF0tN5cAfqc9JtfBHby+6ldVHZ5ZZeKEPRJGJD2B639q7Nd7gIeL8ViGQhI6UnuDMRw==","shasum":"c98161354596b3bf62d1bb843ed97b6175f3ff86","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2302171719.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHoOnebI0vnaY4kHt/BVJGv+WPl3KEf2slPEG4bGXm4OAiA1TGrEm83ItA66efcpSR/hRT8N0/GEFDCXARqAScN+/g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8IrhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP1g//VaA9AHVq0Qp8sBfJUqMaCFTNKP0NFI0uW01DuIB30i2t2hcW\r\nnNMZRm0fzWQGdFEpIryRz2ODF/rOt17vGPvWv96yDKjlQPDSE5xTbxGj/ZrO\r\n1ZkhxJ186rhx7pVLe2Bi3qE8oUZzoxTq/Yev46s/N5szhe/RDabx5CgAr5BZ\r\nIWMWublclfFTtXxgKVcosDlS4EyC7M9fgOrGo7TPRydc3VQDmkzJIqY3nrTJ\r\nMrx700g/A+SqcsrVhonyRF4rRiIJReavNiWsZ51aap0yvx9BX7GztA2+ROPQ\r\nMIySK0BrGerNoC+tSbpPE/IB0tP5E0/XVIkwTpSZg+3AVUPHb/ASs3kZH+0x\r\n7rC/Njjo2I8tiFgZohGyJ/wY/trLkWE+9gg5kh4BBDsmuTpreWczaqI47B/f\r\ntIFIEFkK/wDxpW5u6ISBcVK6GTRTBDc4ZomJNFPSH0SR/ilfSTDUpe4CpbvX\r\nZkAtTZQxnQPl3xeJLUXI+kZa3+Of646Lw1akQSg91xKQXgVRnBtDx8u+8tA9\r\nf8eT6+SDvU7ItHvfBq4Yt6SDmreTaLrnfJZ/cMGsy2FLg43/yIW/QdScqJ+a\r\nqKtwwnSN40/xP3FaXSGBO4hRDqEoREvyDizDGS4Lvbm2auFID5mDEFOt+k1R\r\nZ+187YpRaj/ylaWwTXAuMFZLs/LMceEwNFY=\r\n=G4xj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2302171719.0_1676708577226_0.924868377563937"},"_hasShrinkwrap":false},"1.2302271541.0":{"name":"@bentoproject/accordion","version":"1.2302271541.0","description":"Displays content sections that can be collapsed and expanded.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302271541.0"},"readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md","gitHead":"13cfe7f4354a82bebe08fd29496c4c7de848a18b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/accordion@1.2302271541.0","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-hE4ZOhkn5UXZ6+tdDuhzwutkE4/jolIM9VllyybtPD5UmIwyj7u+WbOQWBt1LRCMWdY+v8S+Z7d1R6d1JDKa0Q==","shasum":"e0ca7104ad7d98ff8bef3912e8e5d25691089fec","tarball":"https://registry.npmjs.org/@bentoproject/accordion/-/accordion-1.2302271541.0.tgz","fileCount":31,"unpackedSize":750770,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4NTvYiRaDZIsfpJEn5f9owyhznVJQUJTfQepeug+jjAiEA9PY92YRLK5KpHzMEeasbyG3R5gFebG9PM3BZk/RHij4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/ji5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5yQ/9Fz30DXH7dLdmWtfr+BJHDqY/tQbcmZfCUK6zFg11gmfXSAzv\r\noSpqeZXfJpKDkPK73aaRyUm9RBakpMTzjbyok2UOAc+gou3rrNFZ8kIdzfd4\r\n9rTxQS9tc7wy3psVmianeeSrO9JrKokGYddzQZwawBkLt9DUD3fuwSW4o5F1\r\nZjW/q1eV0g8FozbO03zHWZNS+o/l8GPjL1KTCn9vfE9D41/hp80bRVQGYUC3\r\nQfxEUmWSXGI1i8AsAhkgvQPeJCIcSXMDtfvWRUhy2sFOU6pW7JVIzvu1BU89\r\n2akzD7AICiJEQj5404LsVP23uFMeyU5IIs9kuOmLyDRoMSUvFtkkHP11eAoQ\r\nHJbC+l6XemRNVPZry9ZqKB1MtziDabLhzJDJETGO5PZnDpg2IiUW5I1xouFz\r\nNDLOC+Q+CftOHMRk7cW/OZInBB6wPwAo9uTGlSt8S1FJQOTke4FxPDE7OEZv\r\n/23z/IVVg+r9B26OnnQrw+1YHFCCHJfi3wFIbp1uAYtu2oX0eJ7xh0x4f2Iy\r\nmOTItqr77w07CDN7FPb/o5VijpuHxangPa+wLsFoNtYioNWacYOiiJXNmSaX\r\ndMhahy2/pVCCR15weruLtYEeVfeIJYZE10JIOhS3Dbe1iJFRIOdAJVNBQsyS\r\nLUOT3aVyINWv8dsdEOcNvd6/lHqHgxfeyqg=\r\n=k6pm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/accordion_1.2302271541.0_1677605048973_0.14912211431254696"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-28T18:17:53.002Z","1.2110261518.0":"2021-10-28T18:17:53.650Z","modified":"2023-03-07T18:41:16.524Z","1.2110252343.0":"2021-10-28T21:47:21.241Z","1.2110281959.0":"2021-10-29T11:52:29.790Z","1.2110290545.0":"2021-10-30T11:21:49.641Z","1.2111011823.0":"2021-11-02T11:24:26.271Z","1.2110152252.3":"2021-11-02T22:03:35.777Z","1.2110212130.2":"2021-11-02T22:14:17.126Z","1.2111022043.0":"2021-11-03T11:21:18.508Z","1.2111180040.0":"2021-11-18T21:27:00.764Z","1.2111060251.3":"2021-11-18T21:42:26.513Z","1.2111182332.0":"2021-11-19T12:24:15.100Z","1.2111060251.9":"2021-11-19T16:30:56.632Z","1.2111191951.0":"2021-11-20T12:23:40.651Z","1.2111230244.0":"2021-11-23T12:23:39.336Z","1.2111230636.0":"2021-11-24T12:22:28.401Z","1.2111242025.0":"2021-11-25T12:42:07.127Z","1.2111292120.0":"2021-11-30T12:40:44.457Z","1.2111152338.2":"2021-11-30T17:55:13.070Z","1.2112010058.0":"2021-12-01T12:18:29.280Z","1.2112012300.0":"2021-12-02T12:29:57.191Z","1.2112021656.0":"2021-12-03T12:21:27.429Z","1.2112032204.0":"2021-12-04T12:20:34.669Z","1.2112062322.0":"2021-12-07T12:27:08.385Z","1.2112062322.1":"2021-12-07T21:38:27.164Z","1.2112062322.2":"2021-12-07T22:28:26.216Z","1.2112080230.0":"2021-12-08T13:22:29.721Z","1.2112080230.1":"2021-12-08T15:57:03.635Z","1.2112082232.0":"2021-12-09T12:45:09.233Z","1.2111242025.1":"2021-12-10T00:12:36.818Z","1.2112091956.0":"2021-12-10T12:46:27.409Z","1.2112102136.0":"2021-12-11T12:31:11.374Z","1.2112132331.0":"2021-12-14T12:59:15.253Z","1.2112160003.0":"2021-12-16T12:19:23.699Z","1.2112162055.0":"2021-12-17T12:17:18.389Z","1.2112170012.0":"2021-12-18T12:17:45.568Z","1.2112201724.0":"2021-12-21T12:21:22.393Z","1.2112212349.0":"2021-12-22T12:23:21.517Z","1.2112221739.0":"2021-12-23T12:18:35.457Z","1.2112231523.0":"2021-12-24T12:20:49.471Z","1.2201042109.0":"2022-01-05T12:30:53.181Z","1.2201052144.0":"2022-01-06T12:40:54.005Z","1.2201061922.0":"2022-01-07T12:32:05.198Z","1.2201071715.0":"2022-01-08T12:22:06.604Z","1.2201101902.0":"2022-01-11T12:29:51.855Z","1.2112231523.1":"2022-01-11T19:25:44.327Z","1.2201120015.0":"2022-01-12T12:30:22.142Z","1.2112231523.2":"2022-01-12T22:38:54.681Z","1.2201122239.0":"2022-01-13T12:59:45.792Z","1.2201131702.0":"2022-01-14T13:03:53.402Z","1.2201141909.0":"2022-01-15T12:21:19.174Z","1.2201141909.1":"2022-01-25T19:49:54.035Z","1.2201141909.3":"2022-01-26T20:58:57.677Z","1.2201141909.4":"2022-02-01T21:38:00.021Z","1.2201212122.3":"2022-02-02T17:58:06.080Z","1.2202012258.0":"2022-02-02T19:13:16.568Z","1.2202022130.0":"2022-02-03T16:55:38.907Z","1.2202031816.0":"2022-02-04T15:46:45.390Z","1.2203041950.0":"2022-03-15T18:35:54.363Z","1.2203151539.0":"2022-03-16T08:21:52.241Z","1.2203172113.0":"2022-03-18T08:23:31.489Z","1.2203221937.0":"2022-03-23T08:25:41.675Z","1.2203231914.0":"2022-03-24T08:23:19.908Z","1.2203101844.0":"2022-03-24T20:09:48.050Z","1.2203281422.0":"2022-03-29T08:28:04.663Z","1.2204121632.0":"2022-04-12T18:14:56.378Z","1.2204122000.0":"2022-04-13T08:31:07.702Z","1.2204132005.0":"2022-04-14T08:32:54.357Z","1.2204142048.0":"2022-04-15T08:26:23.654Z","1.2204160405.0":"2022-04-16T08:23:36.691Z","1.2204182206.0":"2022-04-19T08:30:44.523Z","1.2204191429.0":"2022-04-20T08:30:43.274Z","1.2204211736.0":"2022-04-22T08:25:10.576Z","1.2204221712.0":"2022-04-23T08:24:11.404Z","1.2204252045.0":"2022-04-26T08:30:45.997Z","1.2204272205.0":"2022-04-28T08:33:04.772Z","1.2204281949.0":"2022-04-29T08:26:53.103Z","1.2204292129.0":"2022-04-30T08:24:55.533Z","1.2205031420.0":"2022-05-04T08:25:20.683Z","1.2205041533.0":"2022-05-05T08:25:14.595Z","1.2205051832.0":"2022-05-06T08:25:18.789Z","1.2205090810.0":"2022-05-10T08:31:28.781Z","1.2205101904.0":"2022-05-11T08:31:00.832Z","1.2205120110.0":"2022-05-12T08:30:07.992Z","1.2205161914.0":"2022-05-17T08:25:37.155Z","1.2205181800.0":"2022-05-19T08:26:00.012Z","1.2205191749.0":"2022-05-20T08:26:13.021Z","1.2205232225.0":"2022-05-24T08:25:40.659Z","1.2205120110.1":"2022-05-24T19:12:04.728Z","1.2205251942.0":"2022-05-26T08:25:55.153Z","1.2205270638.0":"2022-05-27T08:25:33.165Z","1.2206071918.0":"2022-06-07T22:27:12.680Z","1.2206072228.0":"2022-06-08T08:26:11.600Z","1.2206082301.0":"2022-06-09T08:29:49.367Z","1.2205270638.4":"2022-06-10T21:33:52.199Z","1.2206101637.0":"2022-06-11T08:25:25.084Z","1.2206131450.0":"2022-06-14T08:26:46.018Z","1.2206071918.1":"2022-06-14T21:26:15.899Z","1.2206162023.0":"2022-06-17T08:26:32.645Z","1.2206221455.0":"2022-06-23T08:26:29.832Z","1.2206291614.0":"2022-06-30T16:07:19.189Z","1.2207071723.0":"2022-07-08T08:32:43.391Z","1.2207181727.0":"2022-07-19T08:25:28.261Z","1.2207201724.0":"2022-07-21T08:25:51.391Z","1.2207221643.0":"2022-07-23T08:25:40.791Z","1.2207261725.0":"2022-07-27T08:25:05.895Z","1.2207281718.0":"2022-07-29T08:28:03.354Z","1.2208021808.0":"2022-08-03T08:27:05.444Z","1.2208042017.0":"2022-08-05T08:28:01.643Z","1.2208051912.0":"2022-08-06T08:27:20.865Z","1.2208081650.0":"2022-08-09T08:26:39.333Z","1.2208092047.0":"2022-08-10T08:26:35.939Z","1.2207281718.1":"2022-08-10T16:58:01.763Z","1.2207281718.2":"2022-08-10T18:14:57.595Z","1.2208112015.0":"2022-08-12T08:27:32.182Z","1.2208121708.0":"2022-08-13T08:25:58.711Z","1.2208051912.1":"2022-08-16T23:04:47.434Z","1.2208172101.0":"2022-08-24T20:54:50.422Z","1.2208242209.0":"2022-08-25T08:26:22.349Z","1.2209072154.0":"2022-09-08T08:24:14.545Z","1.2209131909.0":"2022-09-14T08:43:59.524Z","1.2208242209.1":"2022-09-15T16:42:07.256Z","1.2209142312.0":"2022-09-20T22:07:25.900Z","1.2210010655.0":"2022-10-04T16:48:41.808Z","1.2210041838.0":"2022-10-05T08:29:37.036Z","1.2210052034.0":"2022-10-06T08:24:54.883Z","1.2210071758.0":"2022-10-08T08:26:59.871Z","1.2210112333.0":"2022-10-12T08:24:10.979Z","1.2210142102.0":"2022-10-15T08:23:51.322Z","1.2210172057.0":"2022-10-18T08:27:16.407Z","1.2210191347.0":"2022-10-20T08:25:07.965Z","1.2210211855.0":"2022-10-22T08:23:20.993Z","1.2210251605.0":"2022-10-26T08:26:55.362Z","1.2210272257.0":"2022-10-28T08:25:44.600Z","1.2211042305.0":"2022-11-05T08:24:26.704Z","1.2211060024.0":"2022-11-08T08:25:06.067Z","1.2211111611.0":"2022-11-12T08:23:43.726Z","1.2211151402.0":"2022-11-16T18:40:03.711Z","1.2211182146.0":"2022-11-19T08:25:12.080Z","1.2211250451.0":"2022-11-25T08:24:14.039Z","1.2211302304.0":"2022-12-01T08:23:39.857Z","1.2212071834.0":"2022-12-07T19:37:06.069Z","1.2212092023.0":"2022-12-10T08:25:01.513Z","1.2211302304.1":"2022-12-13T21:53:13.575Z","1.2212151632.0":"2022-12-20T15:51:38.110Z","1.2212151632.1":"2022-12-20T20:09:24.604Z","1.2211302304.2":"2022-12-20T22:31:40.145Z","1.2212151632.2":"2023-01-03T18:11:17.103Z","1.2301031703.0":"2023-01-03T20:29:33.641Z","1.2301032153.0":"2023-01-04T08:24:37.279Z","1.2301041800.0":"2023-01-05T08:25:02.101Z","1.2301100345.0":"2023-01-10T08:25:17.319Z","1.2301112346.0":"2023-01-12T08:26:36.607Z","1.2301181928.0":"2023-01-19T08:25:45.110Z","1.2301261900.0":"2023-01-27T08:27:14.985Z","1.2301301810.0":"2023-01-31T08:25:41.013Z","1.2302012254.0":"2023-02-02T08:24:37.766Z","1.2302021743.0":"2023-02-03T08:26:34.539Z","1.2302031721.0":"2023-02-04T08:23:41.259Z","1.2302171719.0":"2023-02-18T08:22:57.431Z","1.2302271541.0":"2023-02-28T17:24:09.221Z"},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"description":"Displays content sections that can be collapsed and expanded.","homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-accordion/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-accordion/1.0"},"author":{"name":"Bento Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"# Bento Accordion\n\nDisplays content sections that can be collapsed and expanded. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.\n\n-   A Bento Accordion accepts one or more `<section>` elements as its direct children.\n-   Each `<section>` must contain exactly two direct children.\n-   The first child in a `<section>` is the heading for that section of the Bento Accordion. It must be a heading element such as `<h1>-<h6>` or `<header>`.\n-   The second child in a `<section>` is the expandable/collapsible content.\n    -   It can be any tag allowed in [AMP HTML](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md).\n-   A click or tap on a `<section>` heading expands or collapses the section.\n-   A Bento Accordion with a defined `id` preserves the collapsed or expanded state of each section while the user remains on your domain.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n```javascript\nimport {defineElement as defineBentoAccordion} from '@bentoproject/accordion';\ndefineBentoAccordion();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n  </body>\n</html>\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-accordion');\nconst api = await accordion.getApi();\n```\n\n#### API Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n    />\n  </head>\n  <body>\n    <bento-accordion id=\"my-accordion\">\n      <section>\n        <h2>Section 1</h2>\n        <div>Content in section 1.</div>\n      </section>\n      <section>\n        <h2>Section 2</h2>\n        <div>Content in section 2.</div>\n      </section>\n       <!-- Expanded on page load due to attribute: -->\n      <section expanded>\n        <h2>Section 3</h2>\n        <div>Content in section 3.</div>\n      </section>\n    </bento-accordion>\n    <script>\n      (async () => {\n        const accordion = document.querySelector('#my-accordion');\n        await customElements.whenDefined('bento-accordion');\n        const api = await accordion.getApi();\n\n        // programatically expand all sections\n        api.expand();\n        // programatically collapse all sections\n        api.collapse();\n      })();\n    </script>\n  </body>\n</html>\n```\n\n#### Actions\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Toggle All Sections</button>\n<button id=\"button2\">Toggle Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.toggle();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.toggle('section1');\n    };\n  })();\n</script>\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Expand All Sections</button>\n<button id=\"button2\">Expand Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.expand();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.expand('section1');\n    };\n  })();\n</script>\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```html\n<bento-accordion id=\"myAccordion\">\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n</bento-accordion>\n<button id=\"button1\">Collapse All Sections</button>\n<button id=\"button2\">Collapse Section 1</button>\n<script>\n  (async () => {\n    const accordion = document.querySelector('#myAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // set up button actions\n    document.querySelector('#button1').onclick = () => {\n      api.collapse();\n    };\n    document.querySelector('#button2').onclick = () => {\n      api.collapse('section1');\n    };\n  })();\n</script>\n```\n\n#### Events\n\nThe `bento-accordion` API allows you to register and respond to the following events:\n\n##### expand\n\nThis event is triggered when an accordion section is expanded and is dispatched from the expanded section.\n\nSee below for example.\n\n##### collapse\n\nThis event is triggered when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee below for example.\n\n##### Events Example\n\n```html\n<bento-accordion id=\"eventsAccordion\" animate>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Puppies are cute.</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Kittens are furry.</div>\n  </section>\n</bento-accordion>\n\n<script>\n  (async () => {\n    const accordion = document.querySelector('#eventsAccordion');\n    await customElements.whenDefined('bento-accordion');\n    const api = await accordion.getApi();\n\n    // when section 1 expands, section 2 also expands\n    // when section 2 collapses, section 1 also collapses\n    const section1 = document.querySelector('#section1');\n    const section2 = document.querySelector('#section2');\n    section1.addEventListener('expand', () => {\n      api.expand('section2');\n    });\n    section2.addEventListener('collapse', () => {\n      api.collapse('section1');\n    });\n  })();\n</script>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-accordion-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-accordion {\n    display: block;\n    contain: layout;\n  }\n\n  bento-accordion,\n  bento-accordion > section,\n  bento-accordion > section > :first-child {\n    margin: 0;\n  }\n\n  bento-accordion > section > * {\n    display: block;\n    float: none;\n    overflow: hidden; /* clearfix */\n    position: relative;\n  }\n\n  @media (min-width: 1px) {\n    :where(bento-accordion > section) > :first-child {\n      cursor: pointer;\n      background-color: #efefef;\n      padding-right: 20px;\n      border: 1px solid #dfdfdf;\n    }\n  }\n\n  .i-amphtml-accordion-header {\n    cursor: pointer;\n    background-color: #efefef;\n    padding-right: 20px;\n    border: 1px solid #dfdfdf;\n  }\n\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating),\n  bento-accordion\n    > section:not([expanded])\n    > :last-child:not(.i-amphtml-animating)\n    * {\n    display: none !important;\n  }\n</style>\n```\n\n### Attributes\n\n#### animate\n\nInclude the `animate` attribute in `<bento-accordion>` to add a \"roll down\" animation when the content is expanded and \"roll up\" animation when collapsed.\n\nThis attribute can be configured to based on a [media query](./../../../../../docs/spec/amp-html-responsive-attributes.md).\n\n```html\n<bento-accordion animate>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <div>Content in section 2.</div>\n  </section>\n</bento-accordion>\n```\n\n#### expanded\n\nApply the `expanded` attribute to a nested `<section>` to expand that section when the page loads.\n\n```html\n<bento-accordion>\n  <section id=\"section1\">\n    <h2>Section 1</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section2\">\n    <h2>Section 2</h2>\n    <div>Bunch of awesome content</div>\n  </section>\n  <section id=\"section3\" expanded>\n    <h2>Section 3</h2>\n    <div>Bunch of awesome expanded content</div>\n  </section>\n</bento-accordion>\n```\n\n#### expand-single-section\n\nAllow only one section to expand at a time by applying the `expand-single-section` attribute to the `<bento-accordion>` element. This means if a user taps on a collapsed `<section>`, it will expand and collapse other expanded `<section>`'s.\n\n```html\n<bento-accordion expand-single-section>\n  <section>\n    <h2>Section 1</h2>\n    <div>Content in section 1.</div>\n  </section>\n  <section>\n    <h2>Section 2</h2>\n    <div>Content in section 2.</div>\n  </section>\n  <section>\n    <h2>Section 3</h2>\n    <img\n      src=\"https://source.unsplash.com/random/320x256\"\n      width=\"320\"\n      height=\"256\"\n    />\n  </section>\n</bento-accordion>\n```\n\n### Styling\n\nYou may use the `bento-accordion` element selector to style the accordion freely.\n\nKeep the following points in mind when you style an accordion:\n\n-   `bento-accordion` elements are always `display: block`.\n-   `float` cannot style a `<section>`, heading, nor content elements.\n-   An expanded section applies the `expanded` attribute to the `<section>` element.\n-   The content element is clear-fixed with `overflow: hidden` and hence cannot have scrollbars.\n-   Margins of the `<bento-accordion>`, `<section>`, heading, and content elements are set to `0`, but can be overridden in custom styles.\n-   Both the header and content elements are `position: relative`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/accordion\n```\n\n### Example\n\n<!--% example %-->\n\n```jsx\nimport React from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\nfunction App() {\n  return (\n    <BentoAccordion>\n      <BentoAccordionSection key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoAccordion` component API is accessible by passing a `ref`:\n\n```jsx\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection id=\"section1\" key={1}>\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section2\" key={2}>\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection id=\"section3\" key={3}>\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  );\n}\n```\n\n#### Actions\n\nThe `BentoAccordion` API allows you to perform the following actions:\n\n##### toggle()\n\nThe `toggle` action switches the `expanded` and `collapsed` states of `bento-accordion` sections. When called with no arguments, it toggles all sections of the accordion. To specify a specific section, add the `section` argument and use its corresponding `id` as the value.\n\n```javascript\nref.current.toggle();\nref.current.toggle('section1');\n```\n\n##### expand()\n\nThe `expand` action expands the sections of the `bento-accordion`. If a section is already expanded, it stays expanded. When called with no arguments, it expands all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.expand();\nref.current.expand('section1');\n```\n\n##### collapse()\n\nThe `collapse` action collapses the sections of the `bento-accordion`. If a section is already collapsed, it stays collapsed. When called with no arguments, it collapses all sections of the accordion. To specify a section, add the `section` argument, and use its corresponding `id` as the value.\n\n```javascript\nref.current.collapse();\nref.current.collapse('section1');\n```\n\n#### Events\n\nThe Bento Accordion API allows you to respond to the following events:\n\n##### onExpandStateChange\n\nThis event is triggered on a section when an accordion section is expanded or collpased and is dispatched from the expanded section.\n\nSee [example](#events-example) below for example.\n\n##### onCollapse\n\nThis event is triggered on a section when an accordion section is collapsed and is dispatched from the collapsed section.\n\nIn the example below, `section 1` listens for the `expand` event and expands `section 2` when it is expanded. `section 2` listens for the `collapse` event and collapses `section 1` when it is collapsed.\n\nSee [example](#events-example) below for example.\n\n##### Events Example\n\n<!--% example %-->\n\n```jsx\nimport React, {createRef} from 'react';\nimport {\n  BentoAccordion,\n  BentoAccordionSection,\n  BentoAccordionHeader,\n  BentoAccordionContent\n} from '@bentoproject/accordion/react';\nimport '@bentoproject/accordion/styles.css';\n\n\nfunction App() {\n  const ref = createRef();\n  return (\n    <BentoAccordion ref={ref}>\n      <BentoAccordionSection\n        id=\"section1\"\n        key={1}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section1 expanded' : 'section1 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 1</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 1</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section2\"\n        key={2}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section2 expanded' : 'section2 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 2</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 2</BentoAccordionContent>\n      </BentoAccordionSection>\n\n      <BentoAccordionSection\n        id=\"section3\"\n        key={3}\n        onExpandStateChange={(expanded) => {\n          alert(expanded ?  'section3 expanded' : 'section3 collapsed');\n        }}\n      >\n        <BentoAccordionHeader>\n          <h1>Section 3</h1>\n        </BentoAccordionHeader>\n        <BentoAccordionContent>Content 3</BentoAccordionContent>\n      </BentoAccordionSection>\n    </BentoAccordion>\n  )\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoAccordion` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoAccordion style={{width: 300, height: 100}}>...</BentoAccordion>\n```\n\nOr via `className`:\n\n```jsx\n<BentoAccordion className=\"custom-styles\">...</BentoAccordion>\n```\n\n```css\n.custom-styles {\n  background-color: red;\n}\n```\n\n### Props\n\n#### BentoAccordion\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse of each section.\n\nDefault: `false`\n\n##### expandSingleSection\n\nIf true, then expanding 1 section will automatically collapse all other sections.\n\nDefault: `false`\n\n#### BentoAccordionSection\n\n##### animate\n\nIf true, then uses \"roll-down\" / \"roll-up\" animation during the expansion and collapse the section.\n\nDefault: `false`\n\n##### expanded\n\nIf true, expands the section.\n\nDefault: `false`\n\n##### onExpandStateChange\n\n```typescript\n(expanded: boolean): void\n```\n\nCallback to listen for expand state changes. Takes a boolean flag as parameter indicating whether the section was just expanded (`false` indicates it was collapsed)\n\n#### BentoAccordionHeader\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionHeader does not yet support any custom props\n\n#### BentoAccordionContent\n\n#### Common props\n\nThis component supports the [common props](../../../../../docs/spec/bento-common-props.md) for React and Preact components.\n\nBentoAccordionContent does not yet support any custom props\n","readmeFilename":"README.md"}