{"_id":"@ampproject/amp-sidebar","_rev":"16-ec2bc5703f7ba3fc6edd92c4891310a0","name":"@ampproject/amp-sidebar","dist-tags":{"nightly":"1.2110252343.0","latest":"1.2110011758.0"},"versions":{"1.2109222204.0":{"name":"@ampproject/amp-sidebar","version":"1.2109222204.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2109222204.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-yIQQJgoPs8Vw6VhNoZZyveDL6LRprgXKKbKQfm2v5eYzNo16bVp0R2qlTrFHffvlAnaSkP5SVKtJTSENt7swjQ==","shasum":"6651dc60bae9aba59358df3db9589a8b1ee82f35","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2109222204.0.tgz","fileCount":19,"unpackedSize":522312,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlk33gGDJtN+5exGy9b0gsqorsVB3C7TaBa/w1PCF2qAiEAkXTsCr2hiFNkxYmZBeZksq5hJYD5MDMVrQSlPJodDEk="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2109222204.0_1632397308016_0.6345668716257169"},"_hasShrinkwrap":false},"1.2110112305.0":{"name":"@ampproject/amp-sidebar","version":"1.2110112305.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Sidebar\n\n## Usage\n\nThe Bento Sidebar provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.\n\nUse Bento Sidebar as a web component [`<bento-sidebar>`](#web-component), or a Preact/React functional component [`<BentoSidebar>`](#preactreact-component).\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-sidebar>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport '@ampproject/bento-sidebar';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-sidebar:not([open]) {\n      display: none !important;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-sidebar-1.0.js\"></script>\n</head>\n<body>\n  <bento-sidebar id=\"sidebar1\" side=\"right\">\n    <ul>\n      <li>Nav item 1</li>\n      <li>Nav item 2</li>\n      <li>Nav item 3</li>\n      <li>Nav item 4</li>\n      <li>Nav item 5</li>\n      <li>Nav item 6</li>\n    </ul>\n  </bento-sidebar>\n\n  <div class=\"buttons\" style=\"margin-top: 8px;\">\n    <button id=\"open-sidebar\">\n      Open sidebar\n    </button>\n  </div>\n\n  <script>\n    (async () => {\n      const sidebar = document.querySelector('#sidebar1');\n      await customElements.whenDefined('bento-sidebar');\n      const api = await sidebar.getApi();\n\n      // set up button actions\n      document.querySelector('#open-sidebar').onclick = () => api.open();\n    })();\n  </script>\n</body>\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.\n-   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<nav toolbar=\"(max-width: 1024px)\" toolbar-target=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```html\n<bento-sidebar id=\"sidebar1\" side=\"right\">\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n\n  <nav toolbar=\"(max-width: 767px)\" toolbar-target=\"target-element\">\n    <ul>\n      <li>\n        <input placeholder=\"Search...\" />\n      </li>\n    </ul>\n  </nav>\n</bento-sidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-sidebar');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-sidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\napi.open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\napi.close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\napi.toggle(0);\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 rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-sidebar-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-sidebar:not([open]) {\n    display: none !important;\n  }\n</style>\n```\n\n##### Custom styles\n\nThe `bento-sidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the pre-set 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n-   The current state of the sidebar is exposed via the `open` attribute that is set on the `bento-sidebar` tag when the side bar is open on the page.\n\n```css\nbento-sidebar[open] {\n  height: 100%;\n  width: 50px;\n}\n```\n\n#### UX considerations\n\nWhen using `<bento-sidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<bento-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `bento-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n#### Attributes\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### open\n\nThis attribute is present when the sidebar is open.\n\n##### toolbar\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbar-target\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSidebar>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport React from 'react';\nimport { BentoSidebar } from '@ampproject/bento-sidebar/react';\nimport '@ampproject/bento-sidebar/styles.css';\n\nfunction App() {\n  return (\n    <BentoSidebar>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.\n-   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar=\"(max-width: 1024px)\" toolbarTarget=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```jsx\n<BentoSidebar>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n  <BentoSidebarToolbar toolbar=\"(max-width: 767px)\" toolbarTarget=\"toolbar-target\">\n    <ul>\n      <li>Toolbar Item 1</li>\n      <li>Toolbar Item 2</li>\n    </ul>\n  </BentoSidebarToolbar>\n</BentoSidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoSidebar` 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    <BentoSidebar ref={ref}>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoSidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\nref.current..open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\nref.current..close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\nref.current..toggle(0);\n```\n\n#### Layout and style\n\nThe `BentoSidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the preset 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n\nTo ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:\n\n```jsx\n<BentoSidebar style={{width: '300px', height: '100%'}}>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSidebar className='custom-styles'>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\n```css\n.custom-styles {\n  height: 100%;\n  width: 300px;\n}\n```\n\n#### UX considerations\n\nWhen using `<BentoSidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<BentoSidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `BentoSidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n### Props\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### toolbar\n\nThis prop is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbarTarget\n\nThis attribute is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110112305.0","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-6uhabmc/cMnasQ2Px8xo79G7WeVRZL4TLnGTKfSBn7kBiGN/ZIhfUZCClp7BEfQx34lj5eiwn491sShtdD5AUQ==","shasum":"6c5fd52b1e44e18ba024aa61f78054e475da4423","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110112305.0.tgz","fileCount":20,"unpackedSize":533002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGx5cs0FVppkzpRqX0J1P5MpZqPK84UmG4sKVrhoelPHAiAk86uPdzwTDLy6qtMzB7d5tp8RxIkJMne4JD59aSsFMg=="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110112305.0_1634038874766_0.1797365139770455"},"_hasShrinkwrap":false},"1.2110121825.0":{"name":"@ampproject/amp-sidebar","version":"1.2110121825.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Sidebar\n\n## Usage\n\nThe Bento Sidebar provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.\n\nUse Bento Sidebar as a web component [`<bento-sidebar>`](#web-component), or a Preact/React functional component [`<BentoSidebar>`](#preactreact-component).\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-sidebar>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport '@ampproject/bento-sidebar';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-sidebar:not([open]) {\n      display: none !important;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-sidebar-1.0.js\"></script>\n</head>\n<body>\n  <bento-sidebar id=\"sidebar1\" side=\"right\">\n    <ul>\n      <li>Nav item 1</li>\n      <li>Nav item 2</li>\n      <li>Nav item 3</li>\n      <li>Nav item 4</li>\n      <li>Nav item 5</li>\n      <li>Nav item 6</li>\n    </ul>\n  </bento-sidebar>\n\n  <div class=\"buttons\" style=\"margin-top: 8px;\">\n    <button id=\"open-sidebar\">\n      Open sidebar\n    </button>\n  </div>\n\n  <script>\n    (async () => {\n      const sidebar = document.querySelector('#sidebar1');\n      await customElements.whenDefined('bento-sidebar');\n      const api = await sidebar.getApi();\n\n      // set up button actions\n      document.querySelector('#open-sidebar').onclick = () => api.open();\n    })();\n  </script>\n</body>\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.\n-   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<nav toolbar=\"(max-width: 1024px)\" toolbar-target=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```html\n<bento-sidebar id=\"sidebar1\" side=\"right\">\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n\n  <nav toolbar=\"(max-width: 767px)\" toolbar-target=\"target-element\">\n    <ul>\n      <li>\n        <input placeholder=\"Search...\" />\n      </li>\n    </ul>\n  </nav>\n</bento-sidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-sidebar');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-sidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\napi.open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\napi.close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\napi.toggle(0);\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 rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-sidebar-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-sidebar:not([open]) {\n    display: none !important;\n  }\n</style>\n```\n\n##### Custom styles\n\nThe `bento-sidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the pre-set 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n-   The current state of the sidebar is exposed via the `open` attribute that is set on the `bento-sidebar` tag when the side bar is open on the page.\n\n```css\nbento-sidebar[open] {\n  height: 100%;\n  width: 50px;\n}\n```\n\n#### UX considerations\n\nWhen using `<bento-sidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<bento-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `bento-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n#### Attributes\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### open\n\nThis attribute is present when the sidebar is open.\n\n##### toolbar\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbar-target\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSidebar>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport React from 'react';\nimport { BentoSidebar } from '@ampproject/bento-sidebar/react';\nimport '@ampproject/bento-sidebar/styles.css';\n\nfunction App() {\n  return (\n    <BentoSidebar>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.\n-   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar=\"(max-width: 1024px)\" toolbarTarget=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```jsx\n<BentoSidebar>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n  <BentoSidebarToolbar toolbar=\"(max-width: 767px)\" toolbarTarget=\"toolbar-target\">\n    <ul>\n      <li>Toolbar Item 1</li>\n      <li>Toolbar Item 2</li>\n    </ul>\n  </BentoSidebarToolbar>\n</BentoSidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoSidebar` 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    <BentoSidebar ref={ref}>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoSidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\nref.current..open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\nref.current..close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\nref.current..toggle(0);\n```\n\n#### Layout and style\n\nThe `BentoSidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the preset 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n\nTo ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:\n\n```jsx\n<BentoSidebar style={{width: '300px', height: '100%'}}>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSidebar className='custom-styles'>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\n```css\n.custom-styles {\n  height: 100%;\n  width: 300px;\n}\n```\n\n#### UX considerations\n\nWhen using `<BentoSidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<BentoSidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `BentoSidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n### Props\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### toolbar\n\nThis prop is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbarTarget\n\nThis attribute is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110121825.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-O4l8junpgpUubVJnr6nxKwiRT4oel6QKZ4iGiWieHxYljr+pb5tzRm2IPCvPmoulCKH0bVxj71N9olFK3d1fBQ==","shasum":"351f6e1844cc4509ce5974a7c00872af13c52ae7","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110121825.0.tgz","fileCount":20,"unpackedSize":533002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdLf0jLOM9edMeOjwzgddIi4VT0Z7c+EX0FwmHl3OOqQIhAJ3Yop9HJL/nFjUuNTWpF46c1xyddYhdJD7CN6wRZ39X"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110121825.0_1634124399696_0.10720211286101433"},"_hasShrinkwrap":false},"1.2110011758.0":{"name":"@ampproject/amp-sidebar","version":"1.2110011758.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110011758.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-E+K8+LOrOaJTG9oVQn/2IDToBmOOjYZrkd3mYuGdDlU1G1ASRViX7hPb2RVTAVo3Uhw4vi8MawGr/gaxnYOCmA==","shasum":"7af309495a81b3f7bb8ee21cdedfaa1d388d0c04","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110011758.0.tgz","fileCount":20,"unpackedSize":533002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzFRsCRA9TVsSAnZWagAAiB8P/jBBAPK/34DXp7ZZ/HVA\neYcB6+vqwf73nHtgBzNH2PF6J0vLDX+zOr/F/ypQAd2OJDUiO2bacD0CKNsj\nkPU46zFPqBiPA5DmbUrn64v7MAkbD+7el45VLMKzFh4hcSIk6gN1ph51vQRu\ne7X/GmZWRdP4v9dFwokGK5+kYbVgDYGT24lI5rbQPsvpMwS1FJlb6SiAwgLL\nD4Hy1UKBqOjHN08g6JhLMAdN94n3SqTpYoAWjBJdm4L1NNNEKuyedTvcTWlp\nu2/x4lgzzBjdE5w9yzaIWhn4eSIdZQlEroDkB3zVOaIRX3hFshoyhmFmRNOe\n6j4zYJnrlOHIFP9zvDGbOMWoEB/ENtkLTXHFfGLP4Gj19ZxuC+wiM5/7suYj\nuEIm0p8YpRNEouG0DcFGOoXrDT+0A8Jy5jzDPwagxg6JhtA3l9nwgNjC2+Mf\nMleF1/17NN2yhNmuD89QvLNk36X3oXRJ7Pli6b6uR4xQY5ipRlhDw4g2fAZ1\n5OGnN+atKzt23OjQc3IZ/S/TtztOSlzTTAFBt4+hYgoFHeLqdv2iF82nCfIk\nv4UIapKT7fTTuaqnLQcyvo7Y+GcgZAWV1bXxrvKVQZCowiB4EhphN8uRkSXG\n9GYmEzWE8T2rEHpMzsU2DuZXHq3WJTsl/KxtSyMlBj7d6Gzygvigax3ZCjqv\nt69H\r\n=K0cF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICXs1QQBeiLALdnaZU8YwHWlg/FHrPjdAa51ECQigV/OAiEAzvBj53ZK1RW9nY7tXyP8QaQYkdFLGEAduBYYoW4R4Vw="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110011758.0_1634221235733_0.634400280882913"},"_hasShrinkwrap":false,"deprecated":"See @bentoproject/sidebar"},"1.2110142235.0":{"name":"@ampproject/amp-sidebar","version":"1.2110142235.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Sidebar\n\n## Usage\n\nThe Bento Sidebar provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.\n\nUse Bento Sidebar as a web component [`<bento-sidebar>`](#web-component), or a Preact/React functional component [`<BentoSidebar>`](#preactreact-component).\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-sidebar>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport '@ampproject/bento-sidebar';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-sidebar:not([open]) {\n      display: none !important;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-sidebar-1.0.js\"></script>\n</head>\n<body>\n  <bento-sidebar id=\"sidebar1\" side=\"right\">\n    <ul>\n      <li>Nav item 1</li>\n      <li>Nav item 2</li>\n      <li>Nav item 3</li>\n      <li>Nav item 4</li>\n      <li>Nav item 5</li>\n      <li>Nav item 6</li>\n    </ul>\n  </bento-sidebar>\n\n  <div class=\"buttons\" style=\"margin-top: 8px;\">\n    <button id=\"open-sidebar\">\n      Open sidebar\n    </button>\n  </div>\n\n  <script>\n    (async () => {\n      const sidebar = document.querySelector('#sidebar1');\n      await customElements.whenDefined('bento-sidebar');\n      const api = await sidebar.getApi();\n\n      // set up button actions\n      document.querySelector('#open-sidebar').onclick = () => api.open();\n    })();\n  </script>\n</body>\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.\n-   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<nav toolbar=\"(max-width: 1024px)\" toolbar-target=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```html\n<bento-sidebar id=\"sidebar1\" side=\"right\">\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n\n  <nav toolbar=\"(max-width: 767px)\" toolbar-target=\"target-element\">\n    <ul>\n      <li>\n        <input placeholder=\"Search...\" />\n      </li>\n    </ul>\n  </nav>\n</bento-sidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-sidebar');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-sidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\napi.open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\napi.close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\napi.toggle(0);\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 rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-sidebar-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-sidebar:not([open]) {\n    display: none !important;\n  }\n</style>\n```\n\n##### Custom styles\n\nThe `bento-sidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the pre-set 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n-   The current state of the sidebar is exposed via the `open` attribute that is set on the `bento-sidebar` tag when the side bar is open on the page.\n\n```css\nbento-sidebar[open] {\n  height: 100%;\n  width: 50px;\n}\n```\n\n#### UX considerations\n\nWhen using `<bento-sidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<bento-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `bento-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n#### Attributes\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### open\n\nThis attribute is present when the sidebar is open.\n\n##### toolbar\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbar-target\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSidebar>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport React from 'react';\nimport { BentoSidebar } from '@ampproject/bento-sidebar/react';\nimport '@ampproject/bento-sidebar/styles.css';\n\nfunction App() {\n  return (\n    <BentoSidebar>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.\n-   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar=\"(max-width: 1024px)\" toolbarTarget=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```jsx\n<BentoSidebar>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n  <BentoSidebarToolbar toolbar=\"(max-width: 767px)\" toolbarTarget=\"toolbar-target\">\n    <ul>\n      <li>Toolbar Item 1</li>\n      <li>Toolbar Item 2</li>\n    </ul>\n  </BentoSidebarToolbar>\n</BentoSidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoSidebar` 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    <BentoSidebar ref={ref}>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoSidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\nref.current..open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\nref.current..close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\nref.current..toggle(0);\n```\n\n#### Layout and style\n\nThe `BentoSidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the preset 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n\nTo ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:\n\n```jsx\n<BentoSidebar style={{width: '300px', height: '100%'}}>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSidebar className='custom-styles'>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\n```css\n.custom-styles {\n  height: 100%;\n  width: 300px;\n}\n```\n\n#### UX considerations\n\nWhen using `<BentoSidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<BentoSidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `BentoSidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n### Props\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### toolbar\n\nThis prop is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbarTarget\n\nThis attribute is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110142235.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-yZX5mEQhNJ5kUt4dpXTN8IF+wFAzfcPnU1fXs4vGGylgMETtPwLmQHrvHl5nR1XViHmN8xsrulgRw4qNcQAhAQ==","shasum":"75561ff143042c38d89475bd0a6471c05b6f964e","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110142235.0.tgz","fileCount":20,"unpackedSize":533002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0DubNBCADu4g+LXUWUL5Mikj3/kRvMrxOJYlGgZrgeQIgITExf118McOiQZSDAeGvrTyZS0lzm5tz9vjKgZaVja8="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110142235.0_1634297879137_0.5142270119516827"},"_hasShrinkwrap":false},"1.2110152252.0":{"name":"@ampproject/amp-sidebar","version":"1.2110152252.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Sidebar\n\n## Usage\n\nThe Bento Sidebar provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.\n\nUse Bento Sidebar as a web component [`<bento-sidebar>`](#web-component), or a Preact/React functional component [`<BentoSidebar>`](#preactreact-component).\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-sidebar>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport '@ampproject/bento-sidebar';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-sidebar:not([open]) {\n      display: none !important;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-sidebar-1.0.js\"></script>\n</head>\n<body>\n  <bento-sidebar id=\"sidebar1\" side=\"right\">\n    <ul>\n      <li>Nav item 1</li>\n      <li>Nav item 2</li>\n      <li>Nav item 3</li>\n      <li>Nav item 4</li>\n      <li>Nav item 5</li>\n      <li>Nav item 6</li>\n    </ul>\n  </bento-sidebar>\n\n  <div class=\"buttons\" style=\"margin-top: 8px;\">\n    <button id=\"open-sidebar\">\n      Open sidebar\n    </button>\n  </div>\n\n  <script>\n    (async () => {\n      const sidebar = document.querySelector('#sidebar1');\n      await customElements.whenDefined('bento-sidebar');\n      const api = await sidebar.getApi();\n\n      // set up button actions\n      document.querySelector('#open-sidebar').onclick = () => api.open();\n    })();\n  </script>\n</body>\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.\n-   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<nav toolbar=\"(max-width: 1024px)\" toolbar-target=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```html\n<bento-sidebar id=\"sidebar1\" side=\"right\">\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n\n  <nav toolbar=\"(max-width: 767px)\" toolbar-target=\"target-element\">\n    <ul>\n      <li>\n        <input placeholder=\"Search...\" />\n      </li>\n    </ul>\n  </nav>\n</bento-sidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-sidebar');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-sidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\napi.open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\napi.close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\napi.toggle(0);\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 rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-sidebar-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-sidebar:not([open]) {\n    display: none !important;\n  }\n</style>\n```\n\n##### Custom styles\n\nThe `bento-sidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the pre-set 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n-   The current state of the sidebar is exposed via the `open` attribute that is set on the `bento-sidebar` tag when the side bar is open on the page.\n\n```css\nbento-sidebar[open] {\n  height: 100%;\n  width: 50px;\n}\n```\n\n#### UX considerations\n\nWhen using `<bento-sidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<bento-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `bento-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n#### Attributes\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### open\n\nThis attribute is present when the sidebar is open.\n\n##### toolbar\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbar-target\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSidebar>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport React from 'react';\nimport { BentoSidebar } from '@ampproject/bento-sidebar/react';\nimport '@ampproject/bento-sidebar/styles.css';\n\nfunction App() {\n  return (\n    <BentoSidebar>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.\n-   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar=\"(max-width: 1024px)\" toolbarTarget=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```jsx\n<BentoSidebar>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n  <BentoSidebarToolbar toolbar=\"(max-width: 767px)\" toolbarTarget=\"toolbar-target\">\n    <ul>\n      <li>Toolbar Item 1</li>\n      <li>Toolbar Item 2</li>\n    </ul>\n  </BentoSidebarToolbar>\n</BentoSidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoSidebar` 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    <BentoSidebar ref={ref}>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoSidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\nref.current..open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\nref.current..close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\nref.current..toggle(0);\n```\n\n#### Layout and style\n\nThe `BentoSidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the preset 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n\nTo ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:\n\n```jsx\n<BentoSidebar style={{width: '300px', height: '100%'}}>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSidebar className='custom-styles'>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\n```css\n.custom-styles {\n  height: 100%;\n  width: 300px;\n}\n```\n\n#### UX considerations\n\nWhen using `<BentoSidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<BentoSidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `BentoSidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n### Props\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### toolbar\n\nThis prop is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbarTarget\n\nThis attribute is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110152252.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-yBfohF76L9pkbJwZ8npzBLkJTAhS3WMujlcqkoFEtxyt7nT+LY2IAAE/CyF8Z2s8tGWw5q6nEI03extbatNX5A==","shasum":"10c4312168e995fb6c31e67057cf33fdff454e2b","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110152252.0.tgz","fileCount":20,"unpackedSize":533002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNADI95gpnprahgVWIS0JbU+uisU5OYkdeZf0mNN+LnAiEAp9pS/ZeNHNYO0qRt0d/PZarQMzLU0Vpk92LDreyRVa4="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110152252.0_1634384382772_0.8564691138020608"},"_hasShrinkwrap":false},"1.2110181554.0":{"name":"@ampproject/amp-sidebar","version":"1.2110181554.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Sidebar\n\n## Usage\n\nThe Bento Sidebar provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.\n\nUse Bento Sidebar as a web component [`<bento-sidebar>`](#web-component), or a Preact/React functional component [`<BentoSidebar>`](#preactreact-component).\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-sidebar>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport '@ampproject/bento-sidebar';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-sidebar:not([open]) {\n      display: none !important;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-sidebar-1.0.js\"></script>\n</head>\n<body>\n  <bento-sidebar id=\"sidebar1\" side=\"right\">\n    <ul>\n      <li>Nav item 1</li>\n      <li>Nav item 2</li>\n      <li>Nav item 3</li>\n      <li>Nav item 4</li>\n      <li>Nav item 5</li>\n      <li>Nav item 6</li>\n    </ul>\n  </bento-sidebar>\n\n  <div class=\"buttons\" style=\"margin-top: 8px;\">\n    <button id=\"open-sidebar\">\n      Open sidebar\n    </button>\n  </div>\n\n  <script>\n    (async () => {\n      const sidebar = document.querySelector('#sidebar1');\n      await customElements.whenDefined('bento-sidebar');\n      const api = await sidebar.getApi();\n\n      // set up button actions\n      document.querySelector('#open-sidebar').onclick = () => api.open();\n    })();\n  </script>\n</body>\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.\n-   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<nav toolbar=\"(max-width: 1024px)\" toolbar-target=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```html\n<bento-sidebar id=\"sidebar1\" side=\"right\">\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n\n  <nav toolbar=\"(max-width: 767px)\" toolbar-target=\"target-element\">\n    <ul>\n      <li>\n        <input placeholder=\"Search...\" />\n      </li>\n    </ul>\n  </nav>\n</bento-sidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-sidebar');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-sidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\napi.open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\napi.close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\napi.toggle(0);\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 rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-sidebar-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-sidebar:not([open]) {\n    display: none !important;\n  }\n</style>\n```\n\n##### Custom styles\n\nThe `bento-sidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the pre-set 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n-   The current state of the sidebar is exposed via the `open` attribute that is set on the `bento-sidebar` tag when the side bar is open on the page.\n\n```css\nbento-sidebar[open] {\n  height: 100%;\n  width: 50px;\n}\n```\n\n#### UX considerations\n\nWhen using `<bento-sidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<bento-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `bento-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n#### Attributes\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### open\n\nThis attribute is present when the sidebar is open.\n\n##### toolbar\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbar-target\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSidebar>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport React from 'react';\nimport { BentoSidebar } from '@ampproject/bento-sidebar/react';\nimport '@ampproject/bento-sidebar/styles.css';\n\nfunction App() {\n  return (\n    <BentoSidebar>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.\n-   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar=\"(max-width: 1024px)\" toolbarTarget=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```jsx\n<BentoSidebar>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n  <BentoSidebarToolbar toolbar=\"(max-width: 767px)\" toolbarTarget=\"toolbar-target\">\n    <ul>\n      <li>Toolbar Item 1</li>\n      <li>Toolbar Item 2</li>\n    </ul>\n  </BentoSidebarToolbar>\n</BentoSidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoSidebar` 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    <BentoSidebar ref={ref}>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoSidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\nref.current..open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\nref.current..close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\nref.current..toggle(0);\n```\n\n#### Layout and style\n\nThe `BentoSidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the preset 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n\nTo ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:\n\n```jsx\n<BentoSidebar style={{width: '300px', height: '100%'}}>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSidebar className='custom-styles'>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\n```css\n.custom-styles {\n  height: 100%;\n  width: 300px;\n}\n```\n\n#### UX considerations\n\nWhen using `<BentoSidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<BentoSidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `BentoSidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n### Props\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### toolbar\n\nThis prop is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbarTarget\n\nThis attribute is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110181554.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-HvXElv5PI8m6OzO4O3c+LLdfC7XTKiEbZZphhAdy1i2X4Bx3E5c5Kyu9A2Y5q3SoXDE+IDgL9pMvAkllm8dmQg==","shasum":"0035576027758b0d11021441d5465b924fbe2b09","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110181554.0.tgz","fileCount":20,"unpackedSize":533002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsttnjBkYeUhzzW04t2BXgT7MGktbPngCcyzkoOTzdzAIhAJVH5kovD6H2ZkKUGU7a2VSgRyGR9bR86VanoWT9XeWc"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110181554.0_1634644424938_0.6541804874651953"},"_hasShrinkwrap":false},"1.2110082201.1":{"name":"@ampproject/amp-sidebar","version":"1.2110082201.1","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110082201.1","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-5ZlUHs5oY7veG3018gcCrQSDsqL9X0Wf7rN1Q1TF0u0MvuMyBGzrwGb0Brrc/HdzLR+b3x7wAxD0Lq7TSt9eXQ==","shasum":"1cb5ebac448e5e311dec40e7906ab49ff978970a","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110082201.1.tgz","fileCount":20,"unpackedSize":533002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0XkG2ibLQmshBHICcc7QjFjI796sYdNPUl7vD4xJtVAiEA2aIoKrZS9yM0Dt/RTzDH8Ld98l5QQYAAKglrioutsZk="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110082201.1_1634664050851_0.3660006949180943"},"_hasShrinkwrap":false},"1.2110192227.0":{"name":"@ampproject/amp-sidebar","version":"1.2110192227.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Sidebar\n\n## Usage\n\nThe Bento Sidebar provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.\n\nUse Bento Sidebar as a web component [`<bento-sidebar>`](#web-component), or a Preact/React functional component [`<BentoSidebar>`](#preactreact-component).\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-sidebar>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport '@ampproject/bento-sidebar';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-sidebar:not([open]) {\n      display: none !important;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-sidebar-1.0.js\"></script>\n</head>\n<body>\n  <bento-sidebar id=\"sidebar1\" side=\"right\">\n    <ul>\n      <li>Nav item 1</li>\n      <li>Nav item 2</li>\n      <li>Nav item 3</li>\n      <li>Nav item 4</li>\n      <li>Nav item 5</li>\n      <li>Nav item 6</li>\n    </ul>\n  </bento-sidebar>\n\n  <div class=\"buttons\" style=\"margin-top: 8px;\">\n    <button id=\"open-sidebar\">\n      Open sidebar\n    </button>\n  </div>\n\n  <script>\n    (async () => {\n      const sidebar = document.querySelector('#sidebar1');\n      await customElements.whenDefined('bento-sidebar');\n      const api = await sidebar.getApi();\n\n      // set up button actions\n      document.querySelector('#open-sidebar').onclick = () => api.open();\n    })();\n  </script>\n</body>\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.\n-   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<nav toolbar=\"(max-width: 1024px)\" toolbar-target=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```html\n<bento-sidebar id=\"sidebar1\" side=\"right\">\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n\n  <nav toolbar=\"(max-width: 767px)\" toolbar-target=\"target-element\">\n    <ul>\n      <li>\n        <input placeholder=\"Search...\" />\n      </li>\n    </ul>\n  </nav>\n</bento-sidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-sidebar');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-sidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\napi.open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\napi.close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\napi.toggle(0);\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 rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-sidebar-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-sidebar:not([open]) {\n    display: none !important;\n  }\n</style>\n```\n\n##### Custom styles\n\nThe `bento-sidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the pre-set 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n-   The current state of the sidebar is exposed via the `open` attribute that is set on the `bento-sidebar` tag when the side bar is open on the page.\n\n```css\nbento-sidebar[open] {\n  height: 100%;\n  width: 50px;\n}\n```\n\n#### UX considerations\n\nWhen using `<bento-sidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<bento-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `bento-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n#### Attributes\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### open\n\nThis attribute is present when the sidebar is open.\n\n##### toolbar\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbar-target\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSidebar>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport React from 'react';\nimport { BentoSidebar } from '@ampproject/bento-sidebar/react';\nimport '@ampproject/bento-sidebar/styles.css';\n\nfunction App() {\n  return (\n    <BentoSidebar>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.\n-   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar=\"(max-width: 1024px)\" toolbarTarget=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```jsx\n<BentoSidebar>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n  <BentoSidebarToolbar toolbar=\"(max-width: 767px)\" toolbarTarget=\"toolbar-target\">\n    <ul>\n      <li>Toolbar Item 1</li>\n      <li>Toolbar Item 2</li>\n    </ul>\n  </BentoSidebarToolbar>\n</BentoSidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoSidebar` 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    <BentoSidebar ref={ref}>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoSidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\nref.current..open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\nref.current..close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\nref.current..toggle(0);\n```\n\n#### Layout and style\n\nThe `BentoSidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the preset 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n\nTo ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:\n\n```jsx\n<BentoSidebar style={{width: '300px', height: '100%'}}>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSidebar className='custom-styles'>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\n```css\n.custom-styles {\n  height: 100%;\n  width: 300px;\n}\n```\n\n#### UX considerations\n\nWhen using `<BentoSidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<BentoSidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `BentoSidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n### Props\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### toolbar\n\nThis prop is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbarTarget\n\nThis attribute is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110192227.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ggxRPnwAGTHXxaFk3J0KxUPxGDGCkyddZj4kmYIdFoppGq/Fzl2XrJ7ymhOIUny8ehaGk0zZdJZTFsk1YTWNZQ==","shasum":"744395b23d2d1383e8419c8447d36fd28b0be855","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110192227.0.tgz","fileCount":20,"unpackedSize":533002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIF4W/78HT4fZHgSKOb2Ees/VwtYiVnDsu1YuGquXO3QIgIeOfumHAyvEv72TtUch3ZlFvVYlnJ9gJG05Ii0MeXMc="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110192227.0_1634729953301_0.3208777122273254"},"_hasShrinkwrap":false},"1.2110082201.2":{"name":"@ampproject/amp-sidebar","version":"1.2110082201.2","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110082201.2","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-fGcjDE5TJFi9NtlseMcQ036smtKnbG16tOQTy6RB2w1adTHProQV7ZS+lKzXfIIcFDyPAOdS8isbDIMWfwxG+w==","shasum":"d2d21926cff229998eaedd59d9a579c63f3cfc5f","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110082201.2.tgz","fileCount":20,"unpackedSize":533002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLctAdzLmjYEmgZHMn/Pt3Y3k3Fqxq96tmZlKRyhVufQIgQqnySXSO850g7S9QZ2uK0efelNwR7scvl6oR+iJm+nc="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110082201.2_1634768104503_0.7900932804096243"},"_hasShrinkwrap":false},"1.2110202310.0":{"name":"@ampproject/amp-sidebar","version":"1.2110202310.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Sidebar\n\n## Usage\n\nThe Bento Sidebar provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.\n\nUse Bento Sidebar as a web component [`<bento-sidebar>`](#web-component), or a Preact/React functional component [`<BentoSidebar>`](#preactreact-component).\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-sidebar>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport '@ampproject/bento-sidebar';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-sidebar:not([open]) {\n      display: none !important;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-sidebar-1.0.js\"></script>\n</head>\n<body>\n  <bento-sidebar id=\"sidebar1\" side=\"right\">\n    <ul>\n      <li>Nav item 1</li>\n      <li>Nav item 2</li>\n      <li>Nav item 3</li>\n      <li>Nav item 4</li>\n      <li>Nav item 5</li>\n      <li>Nav item 6</li>\n    </ul>\n  </bento-sidebar>\n\n  <div class=\"buttons\" style=\"margin-top: 8px;\">\n    <button id=\"open-sidebar\">\n      Open sidebar\n    </button>\n  </div>\n\n  <script>\n    (async () => {\n      const sidebar = document.querySelector('#sidebar1');\n      await customElements.whenDefined('bento-sidebar');\n      const api = await sidebar.getApi();\n\n      // set up button actions\n      document.querySelector('#open-sidebar').onclick = () => api.open();\n    })();\n  </script>\n</body>\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.\n-   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<nav toolbar=\"(max-width: 1024px)\" toolbar-target=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```html\n<bento-sidebar id=\"sidebar1\" side=\"right\">\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n\n  <nav toolbar=\"(max-width: 767px)\" toolbar-target=\"target-element\">\n    <ul>\n      <li>\n        <input placeholder=\"Search...\" />\n      </li>\n    </ul>\n  </nav>\n</bento-sidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-sidebar');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-sidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\napi.open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\napi.close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\napi.toggle(0);\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 rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-sidebar-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-sidebar:not([open]) {\n    display: none !important;\n  }\n</style>\n```\n\n##### Custom styles\n\nThe `bento-sidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the pre-set 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n-   The current state of the sidebar is exposed via the `open` attribute that is set on the `bento-sidebar` tag when the side bar is open on the page.\n\n```css\nbento-sidebar[open] {\n  height: 100%;\n  width: 50px;\n}\n```\n\n#### UX considerations\n\nWhen using `<bento-sidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<bento-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `bento-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n#### Attributes\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### open\n\nThis attribute is present when the sidebar is open.\n\n##### toolbar\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbar-target\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSidebar>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport React from 'react';\nimport { BentoSidebar } from '@ampproject/bento-sidebar/react';\nimport '@ampproject/bento-sidebar/styles.css';\n\nfunction App() {\n  return (\n    <BentoSidebar>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.\n-   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar=\"(max-width: 1024px)\" toolbarTarget=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```jsx\n<BentoSidebar>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n  <BentoSidebarToolbar toolbar=\"(max-width: 767px)\" toolbarTarget=\"toolbar-target\">\n    <ul>\n      <li>Toolbar Item 1</li>\n      <li>Toolbar Item 2</li>\n    </ul>\n  </BentoSidebarToolbar>\n</BentoSidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoSidebar` 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    <BentoSidebar ref={ref}>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoSidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\nref.current..open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\nref.current..close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\nref.current..toggle(0);\n```\n\n#### Layout and style\n\nThe `BentoSidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the preset 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n\nTo ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:\n\n```jsx\n<BentoSidebar style={{width: '300px', height: '100%'}}>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSidebar className='custom-styles'>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\n```css\n.custom-styles {\n  height: 100%;\n  width: 300px;\n}\n```\n\n#### UX considerations\n\nWhen using `<BentoSidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<BentoSidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `BentoSidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n### Props\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### toolbar\n\nThis prop is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbarTarget\n\nThis attribute is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110202310.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-8JyXqyKqX93vAvAHYCqVasKpcQCIRrjE8T5micgwFYc//l9RVZPgX/VXFuhs/kPwNO+eNgtLL2HY7SoLrr+vSA==","shasum":"5dae906ba17ac6bfd1095491821cbbdb76aac4fc","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110202310.0.tgz","fileCount":20,"unpackedSize":533002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpYxg6BrzTDOfJwvgqPwWrgbLUmgdDR12TzKVxiP4l8AiEA5aGj5VS6f5/Sdq+uSSSIXbpiDrdTg3fFJzZolxxriIQ="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110202310.0_1634815511863_0.7875941248265621"},"_hasShrinkwrap":false},"1.2110212130.0":{"name":"@ampproject/amp-sidebar","version":"1.2110212130.0","description":"AMP HTML amp-sidebar Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/component-preact.js","module":"./dist/component-preact.module.js","exports":{".":"./preact","./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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Sidebar\n\n## Usage\n\nThe Bento Sidebar provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.\n\nUse Bento Sidebar as a web component [`<bento-sidebar>`](#web-component), or a Preact/React functional component [`<BentoSidebar>`](#preactreact-component).\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-sidebar>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport '@ampproject/bento-sidebar';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-sidebar:not([open]) {\n      display: none !important;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-sidebar-1.0.js\"></script>\n</head>\n<body>\n  <bento-sidebar id=\"sidebar1\" side=\"right\">\n    <ul>\n      <li>Nav item 1</li>\n      <li>Nav item 2</li>\n      <li>Nav item 3</li>\n      <li>Nav item 4</li>\n      <li>Nav item 5</li>\n      <li>Nav item 6</li>\n    </ul>\n  </bento-sidebar>\n\n  <div class=\"buttons\" style=\"margin-top: 8px;\">\n    <button id=\"open-sidebar\">\n      Open sidebar\n    </button>\n  </div>\n\n  <script>\n    (async () => {\n      const sidebar = document.querySelector('#sidebar1');\n      await customElements.whenDefined('bento-sidebar');\n      const api = await sidebar.getApi();\n\n      // set up button actions\n      document.querySelector('#open-sidebar').onclick = () => api.open();\n    })();\n  </script>\n</body>\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.\n-   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<nav toolbar=\"(max-width: 1024px)\" toolbar-target=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```html\n<bento-sidebar id=\"sidebar1\" side=\"right\">\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n\n  <nav toolbar=\"(max-width: 767px)\" toolbar-target=\"target-element\">\n    <ul>\n      <li>\n        <input placeholder=\"Search...\" />\n      </li>\n    </ul>\n  </nav>\n</bento-sidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-sidebar');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-sidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\napi.open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\napi.close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\napi.toggle(0);\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 rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-sidebar-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-sidebar:not([open]) {\n    display: none !important;\n  }\n</style>\n```\n\n##### Custom styles\n\nThe `bento-sidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the pre-set 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n-   The current state of the sidebar is exposed via the `open` attribute that is set on the `bento-sidebar` tag when the side bar is open on the page.\n\n```css\nbento-sidebar[open] {\n  height: 100%;\n  width: 50px;\n}\n```\n\n#### UX considerations\n\nWhen using `<bento-sidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<bento-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `bento-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n#### Attributes\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### open\n\nThis attribute is present when the sidebar is open.\n\n##### toolbar\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbar-target\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSidebar>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport React from 'react';\nimport { BentoSidebar } from '@ampproject/bento-sidebar/react';\nimport '@ampproject/bento-sidebar/styles.css';\n\nfunction App() {\n  return (\n    <BentoSidebar>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.\n-   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar=\"(max-width: 1024px)\" toolbarTarget=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```jsx\n<BentoSidebar>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n  <BentoSidebarToolbar toolbar=\"(max-width: 767px)\" toolbarTarget=\"toolbar-target\">\n    <ul>\n      <li>Toolbar Item 1</li>\n      <li>Toolbar Item 2</li>\n    </ul>\n  </BentoSidebarToolbar>\n</BentoSidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoSidebar` 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    <BentoSidebar ref={ref}>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoSidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\nref.current..open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\nref.current..close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\nref.current..toggle(0);\n```\n\n#### Layout and style\n\nThe `BentoSidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the preset 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n\nTo ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:\n\n```jsx\n<BentoSidebar style={{width: '300px', height: '100%'}}>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSidebar className='custom-styles'>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\n```css\n.custom-styles {\n  height: 100%;\n  width: 300px;\n}\n```\n\n#### UX considerations\n\nWhen using `<BentoSidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<BentoSidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `BentoSidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n### Props\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### toolbar\n\nThis prop is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbarTarget\n\nThis attribute is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110212130.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-tOkz+4+MzOBt+nC2eT79jVLnaNzkySrGKLNfvtby0B3C1OWoh/6bOOL3gKmbT8wz3149yOxn+dpi57MZjqSPEg==","shasum":"a801119939b940b84bfb058d628c84bf1dfa4c04","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110212130.0.tgz","fileCount":28,"unpackedSize":2104919,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUSUuUzX4KIBsybHUsiTgqURE1LUA/2G/C1MKP5ldgoAiEA3BA/6CPj31TgM8nlHxzwgK1Hll3COKDCvIipAq7Lhjg="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110212130.0_1634902289463_0.675585397123299"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@ampproject/amp-sidebar","version":"1.2110252343.0","description":"AMP HTML amp-sidebar 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-sidebar/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Sidebar\n\n## Usage\n\nThe Bento Sidebar provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.\n\nUse Bento Sidebar as a web component [`<bento-sidebar>`](#web-component), or a Preact/React functional component [`<BentoSidebar>`](#preactreact-component).\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-sidebar>` web component.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport '@ampproject/bento-sidebar';\n```\n\n[/example]\n\n#### Example: Include via `<script>`\n\n[example preview=\"top-frame\" playground=\"false\"]\n\n```html\n<head>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style data-bento-boilerplate>\n    bento-sidebar:not([open]) {\n      display: none !important;\n    }\n  </style>\n  <script async src=\"https://cdn.ampproject.org/v0/bento-sidebar-1.0.js\"></script>\n</head>\n<body>\n  <bento-sidebar id=\"sidebar1\" side=\"right\">\n    <ul>\n      <li>Nav item 1</li>\n      <li>Nav item 2</li>\n      <li>Nav item 3</li>\n      <li>Nav item 4</li>\n      <li>Nav item 5</li>\n      <li>Nav item 6</li>\n    </ul>\n  </bento-sidebar>\n\n  <div class=\"buttons\" style=\"margin-top: 8px;\">\n    <button id=\"open-sidebar\">\n      Open sidebar\n    </button>\n  </div>\n\n  <script>\n    (async () => {\n      const sidebar = document.querySelector('#sidebar1');\n      await customElements.whenDefined('bento-sidebar');\n      const api = await sidebar.getApi();\n\n      // set up button actions\n      document.querySelector('#open-sidebar').onclick = () => api.open();\n    })();\n  </script>\n</body>\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` attribute with a media query and a `toolbar-target` attribute with an element id on a `<nav>` element that is a child of `<bento-sidebar>`. The `toolbar` duplicates the `<nav>` element and its children and appends the element into the `toolbar-target` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` attribute and `toolbar-target` attribute.\n-   The nav element must be a child of `<bento-sidebar>` and follow this format: `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<nav toolbar=\"(max-width: 1024px)\" toolbar-target=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` attribute media-query is valid. Also, an element with the `toolbar-target` attribute id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```html\n<bento-sidebar id=\"sidebar1\" side=\"right\">\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n\n  <nav toolbar=\"(max-width: 767px)\" toolbar-target=\"target-element\">\n    <ul>\n      <li>\n        <input placeholder=\"Search...\" />\n      </li>\n    </ul>\n  </nav>\n</bento-sidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento enabled components used as a standalone web component are highly interactive through their API. The `bento-sidebar` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-sidebar');\nconst api = await carousel.getApi();\n```\n\n##### Actions\n\nThe `bento-sidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\napi.open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\napi.close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\napi.toggle(0);\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 rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.ampproject.org/v0/amp-sidebar-1.0.css\">\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style data-bento-boilerplate>\n  bento-sidebar:not([open]) {\n    display: none !important;\n  }\n</style>\n```\n\n##### Custom styles\n\nThe `bento-sidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the pre-set 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n-   The current state of the sidebar is exposed via the `open` attribute that is set on the `bento-sidebar` tag when the side bar is open on the page.\n\n```css\nbento-sidebar[open] {\n  height: 100%;\n  width: 50px;\n}\n```\n\n#### UX considerations\n\nWhen using `<bento-sidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<bento-sidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `bento-sidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n#### Attributes\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### open\n\nThis attribute is present when the sidebar is open.\n\n##### toolbar\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbar-target\n\nThis attribute is present on child `<nav toolbar=\"(media-query)\" toolbar-target=\"elementID\">`, and accepts an id of an element on the page. The `toolbar-target` attribute will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSidebar>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\n[example preview=\"top-frame\" playground=\"false\"]\n\nInstall via npm:\n\n```sh\nnpm install @ampproject/bento-sidebar\n```\n\n```javascript\nimport React from 'react';\nimport { BentoSidebar } from '@ampproject/bento-sidebar/react';\nimport '@ampproject/bento-sidebar/styles.css';\n\nfunction App() {\n  return (\n    <BentoSidebar>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n[/example]\n\n#### Bento Toolbar\n\nYou can create a Bento Toolbar element that displays in the `<body>` by specifying the `toolbar` prop with a media query and a `toolbarTarget` prop with an element id on a `<BentoSidebarToolbar>` component that is a child of `<BentoSidebar>`. The `toolbar` duplicates the `<BentoSidebarToolbar>` element and its children and appends the element into the `toolbarTarget` element.\n\n##### Behavior\n\n-   The sidebar may implement toolbars by adding nav elements with the `toolbar` prop and `toolbarTarget` prop.\n-   The nav element must be a child of `<BentoSidebar>` and follow this format: `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`.\n    -   For instance, this would be a valid use of toolbar: `<BentoSidebarToolbar toolbar=\"(max-width: 1024px)\" toolbarTarget=\"target-element\">`.\n-   Toolbar behavior is only applied while the `toolbar` prop media-query is valid. Also, an element with the `toolbarTarget` prop id must exist on the page for the toolbar to be applied.\n\n###### Example: Basic Toolbar\n\nIn the following example, we display a `toolbar` if the window width is less than or equal to 767px. The `toolbar` contains a search input element. The `toolbar` element will be appended to the `<div id=\"target-element\">` element.\n\n```jsx\n<BentoSidebar>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n  <BentoSidebarToolbar toolbar=\"(max-width: 767px)\" toolbarTarget=\"toolbar-target\">\n    <ul>\n      <li>Toolbar Item 1</li>\n      <li>Toolbar Item 2</li>\n    </ul>\n  </BentoSidebarToolbar>\n</BentoSidebar>\n\n<div id=\"target-element\"></div>\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoSidebar` 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    <BentoSidebar ref={ref}>\n      <ul>\n        <li>Nav item 1</li>\n        <li>Nav item 2</li>\n        <li>Nav item 3</li>\n        <li>Nav item 4</li>\n        <li>Nav item 5</li>\n        <li>Nav item 6</li>\n      </ul>\n    </BentoSidebar>\n  );\n}\n```\n\n##### Actions\n\nThe `BentoSidebar` API allows you to perform the following actions:\n\n**open()**\nOpens the sidebar.\n\n```javascript\nref.current..open();\n```\n\n**close()**\nCloses the sidebar.\n\n```javascript\nref.current..close();\n```\n\n**toggle()**\nToggles the sidebar open state.\n\n```javascript\nref.current..toggle(0);\n```\n\n#### Layout and style\n\nThe `BentoSidebar` component can be styled with standard CSS.\n\n-   The `width` of the `bento-sidebar` may be set to adjust the width from the preset 45px value.\n-   The height of the `bento-sidebar` may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.\n\nTo ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:\n\n```jsx\n<BentoSidebar style={{width: '300px', height: '100%'}}>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSidebar className='custom-styles'>\n  <ul>\n    <li>Nav item 1</li>\n    <li>Nav item 2</li>\n    <li>Nav item 3</li>\n    <li>Nav item 4</li>\n    <li>Nav item 5</li>\n    <li>Nav item 6</li>\n  </ul>\n</BentoSidebar>\n```\n\n```css\n.custom-styles {\n  height: 100%;\n  width: 300px;\n}\n```\n\n#### UX considerations\n\nWhen using `<BentoSidebar>`, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.\n\nFor this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.\n\n-   The sidebar can only appear on the left or right side of a page.\n-   The max-height of the sidebar is 100vh, if the height exceeds 100vh then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.\n-   The width of the sidebar can be set and adjusted using CSS.\n-   `<BentoSidebar>` is _recommended_ to be be a direct child of the `<body>` to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of `BentoSidebar` with a set `z-index` may cause the sidebar to appear below other elements (such as headers), breaking its functionality.\n\n### Props\n\n##### side\n\nIndicates what side of the page the sidebar should open from, either `left` or `right`. If a `side` is not specified, the `side` value will be inherited from the `body` tag's `dir` attribute (`ltr` => `left` , `rtl` => `right`); if no `dir` exists, the `side` defaults to `left`.\n\n##### toolbar\n\nThis prop is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">` elements, and accepts a media query of when to show a toolbar. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n\n##### toolbarTarget\n\nThis attribute is present on child `<BentoSidebarToolbar toolbar=\"(media-query)\" toolbarTarget=\"elementID\">`, and accepts an id of an element on the page. The `toolbarTarget` prop will place the toolbar into the specified id of the element on the page, without the default toolbar styling. See the [Toolbar](#bento-toolbar) section for more information on using toolbars.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@ampproject/amp-sidebar@1.2110252343.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ppVQMWnEn8hKrV1gC6ycTUGI4iI026qjZ5fNKk10qeXSi1kYnl2m4xqllLE3GAXM4ak0k77J0q4E++XvKJuYbQ==","shasum":"9a28f907749ecb3b27fa937b9e58cff9c4d5616a","tarball":"https://registry.npmjs.org/@ampproject/amp-sidebar/-/amp-sidebar-1.2110252343.0.tgz","fileCount":28,"unpackedSize":2104824,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWm4oYMv93wqhiWqrGulFMdGviV876Tyl/ttFtNviqhwIhAKr3PjIpDVn5uk2ET5mLNUZmbJh9MfRcxcd9C9HSfSoO"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"choumx","email":"willchou@google.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"samouri","email":"jzfisgreat@gmail.com"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/amp-sidebar_1.2110252343.0_1635247269223_0.5019957682336418"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-23T11:41:47.944Z","1.2109222204.0":"2021-09-23T11:41:48.198Z","modified":"2022-04-04T13:52:38.665Z","1.2110112305.0":"2021-10-12T11:41:14.929Z","1.2110121825.0":"2021-10-13T11:26:40.000Z","1.2110011758.0":"2021-10-14T14:20:35.877Z","1.2110142235.0":"2021-10-15T11:37:59.330Z","1.2110152252.0":"2021-10-16T11:39:42.978Z","1.2110181554.0":"2021-10-19T11:53:45.128Z","1.2110082201.1":"2021-10-19T17:20:51.029Z","1.2110192227.0":"2021-10-20T11:39:13.535Z","1.2110082201.2":"2021-10-20T22:15:04.686Z","1.2110202310.0":"2021-10-21T11:25:12.028Z","1.2110212130.0":"2021-10-22T11:31:29.670Z","1.2110252343.0":"2021-10-26T11:21:09.461Z"},"maintainers":[{"name":"alanorozco","email":"orozcoalan@gmail.com"},{"name":"amp-toolbox","email":"amp-toolbox-eng@google.com"},{"name":"ampproject-admin","email":"admin@ampproject.org"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"caroqliu","email":"carolineliu@google.com"},{"name":"choumx","email":"willchou@google.com"},{"name":"dvoytenko","email":"dvoytenko@gmail.com"},{"name":"erwinmombay","email":"erwin.mombay@gmail.com"},{"name":"esth","email":"esther@amp.dev"},{"name":"fstanis","email":"filip@stanis.me"},{"name":"jridgewell","email":"justin+npm@ridgewell.name"},{"name":"kdwan","email":"kdwan@google.com"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"patrickkettner","email":"patrickkettner@gmail.com"},{"name":"rsimha","email":"rsimha@amp.dev"},{"name":"samouri","email":"jzfisgreat@gmail.com"}],"description":"AMP HTML amp-sidebar Component","homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-sidebar/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-sidebar/1.0"},"author":{"name":"The AMP HTML Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}