{"_id":"@bentoproject/lightbox-gallery","_rev":"217-7fe1d6926c441165752ae7b97c90c2cc","name":"@bentoproject/lightbox-gallery","dist-tags":{"nightly":"1.2302271541.0","latest":"1.2302271541.0"},"versions":{"1.2110261518.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2110261518.0","description":"AMP HTML amp-lightbox-gallery 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-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-jmaC/DWmwyZLIh8w0Szc0LgUZd9usx8BDYQvjp0eckfvCMoeBcKRWcAB3vfSTwtkMfgVep/HEAt2BXScYUx+BA==","shasum":"718882ce8b4a6ef8807e20fe98e903dea750fbfc","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2110261518.0.tgz","fileCount":28,"unpackedSize":3061043,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3Kj1eM5idn0g7NgVVDzgfz+Ews3abdF5c/iLD76MxtAIgYWq666R+sCXS4diK++AN6irYtLBhsVDj8mNoQPqB2/Y="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2110261518.0_1635445141321_0.15942831194819984"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2110252343.0","description":"Bento lightbox-gallery Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\n# Usage\n\nThe Bento Lightbox Gallery component provides a \"lightbox\" experience for other components (e.g., HTML images, Bento carousel). When the user interacts with the element, a UI component expands to fill the viewport until it is closed by the user. Currently, only images are supported.\n\nUse Bento Lightbox Gallery as a web component [``](#web-component), or a Preact/React functional component [``](#preact/react-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. As a web component\n\nThe examples below demonstrate use of the `` web component.\n\n### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Example: Import via `\n \n \n \n\n\n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n\n\n```\n\n### Usage\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section,\nthen add the `lightbox` attribute on an `` or `` element.\n\n#### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these\nfields are automatically read and displayed by the `` in\nthe following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption`\nvalue as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as\nits description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\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\n```\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Example: Import Via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n#### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for BentoLightboxGalleryProvider\n\n#### **onBeforeOpen**\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### **onAfterOpen**\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### **onAfterClose**\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### **onViewGrid**\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### **onToggleCaption**\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for WithBentoLightboxGallery\n\n#### **enableActivation**\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### **onClick**\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"57e62ecc0e24bc2cd64467dba9d0f9836eea0182","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2110252343.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-20aVCvDkioOwve7liFIyaw8lQki1W0bJQKxcQcKOxxqr+uLIVC1jVWftStK+uxxebiZf8QJHwrOGzbtTMLvBhA==","shasum":"fca8c0b2bdf4b3743e36493f0c72531a29848467","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2110252343.0.tgz","fileCount":28,"unpackedSize":3061023,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGf/YjZSw9I3kP06Soc0ae7r+4ku2wmmVkS2GATbtIgBAiB85/ZIqC8cjIsN5emUM2JqKI4+E1aPu0vo+QuYt+4r/g=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2110252343.0_1635457623939_0.08557091892248092"},"_hasShrinkwrap":false},"1.2110281959.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2110281959.0","description":"Bento lightbox-gallery Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\n# Usage\n\nThe Bento Lightbox Gallery component provides a \"lightbox\" experience for other components (e.g., HTML images, Bento carousel). When the user interacts with the element, a UI component expands to fill the viewport until it is closed by the user. Currently, only images are supported.\n\nUse Bento Lightbox Gallery as a web component [``](#web-component), or a Preact/React functional component [``](#preact/react-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. As a web component\n\nThe examples below demonstrate use of the `` web component.\n\n### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Example: Import via `\n \n \n \n\n\n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n\n\n```\n\n### Usage\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section,\nthen add the `lightbox` attribute on an `` or `` element.\n\n#### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these\nfields are automatically read and displayed by the `` in\nthe following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption`\nvalue as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as\nits description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\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\n```\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Example: Import Via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n#### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for BentoLightboxGalleryProvider\n\n#### **onBeforeOpen**\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### **onAfterOpen**\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### **onAfterClose**\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### **onViewGrid**\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### **onToggleCaption**\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for WithBentoLightboxGallery\n\n#### **enableActivation**\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### **onClick**\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"55fa3e004e2aeece5faf9a68717228077c215a13","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2110281959.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-iRIKVR7uQLhnbRG08x3XW3Zrpdxgf50idLUjclRHY8ZxFifHhwdm/Aj6NvktE+inERtEALrG6MJXE0rJbWAlrw==","shasum":"ac7af8c59241a71ec885ccb63e10eb73589599dc","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2110281959.0.tgz","fileCount":28,"unpackedSize":3061023,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKWabkHQvI4VOdeLirNwUKUJm47F+Im70wsI8B99LoEAiEAvqfarRR76FV3eW/EEa0ype6sb9Gxhe2gfD902znCDl4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2110281959.0_1635508291513_0.7800206560815939"},"_hasShrinkwrap":false},"1.2110290545.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2110290545.0","description":"Bento lightbox-gallery Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\n# Usage\n\nThe Bento Lightbox Gallery component provides a \"lightbox\" experience for other components (e.g., HTML images, Bento carousel). When the user interacts with the element, a UI component expands to fill the viewport until it is closed by the user. Currently, only images are supported.\n\nUse Bento Lightbox Gallery as a web component [``](#web-component), or a Preact/React functional component [``](#preact/react-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. As a web component\n\nThe examples below demonstrate use of the `` web component.\n\n### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Example: Import via `\n \n \n \n\n\n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n\n\n```\n\n### Usage\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section,\nthen add the `lightbox` attribute on an `` or `` element.\n\n#### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these\nfields are automatically read and displayed by the `` in\nthe following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption`\nvalue as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as\nits description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\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\n```\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Example: Import Via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n#### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for BentoLightboxGalleryProvider\n\n#### **onBeforeOpen**\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### **onAfterOpen**\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### **onAfterClose**\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### **onViewGrid**\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### **onToggleCaption**\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for WithBentoLightboxGallery\n\n#### **enableActivation**\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### **onClick**\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"1cc07336e186d25fc5fbfb2e8f7e12c4a5c79fe9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2110290545.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-7ggPpts2trgyEbWhGCsk5Z2q31g3AEA99BVN/SCbhRcurFPSOqE3cZl64l6TURTVkow8skmh2/9RII9LfDO7SA==","shasum":"06665e881ccfb06a19b63decd24241cbd748c0d4","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2110290545.0.tgz","fileCount":28,"unpackedSize":3061023,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCel1RBS1Q4cmVpSl/n6U/GvIJ4c2HOCa7gSCCdYQEYnAIgB+nYWO6dODDwCcbynfWLwB9lHL9eSQwDFKWAN+0X4oM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2110290545.0_1635592882298_0.2038218263731011"},"_hasShrinkwrap":false},"1.2111011823.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2111011823.0","description":"The Bento Lightbox Gallery component provides a "lightbox" experience for other components (e.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\n# Usage\n\nThe Bento Lightbox Gallery component provides a \"lightbox\" experience for other components (e.g., HTML images, Bento carousel). When the user interacts with the element, a UI component expands to fill the viewport until it is closed by the user. Currently, only images are supported.\n\nUse Bento Lightbox Gallery as a web component [``](#web-component), or a Preact/React functional component [``](#preact/react-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. As a web component\n\nThe examples below demonstrate use of the `` web component.\n\n### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Example: Import via `\n \n \n \n\n\n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n\n\n```\n\n### Usage\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section,\nthen add the `lightbox` attribute on an `` or `` element.\n\n#### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these\nfields are automatically read and displayed by the `` in\nthe following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption`\nvalue as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as\nits description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\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\n```\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Example: Import Via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n#### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for BentoLightboxGalleryProvider\n\n#### **onBeforeOpen**\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### **onAfterOpen**\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### **onAfterClose**\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### **onViewGrid**\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### **onToggleCaption**\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for WithBentoLightboxGallery\n\n#### **enableActivation**\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### **onClick**\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"7bd4192edeb4ded8e78291b094118653b1a78939","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111011823.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-e7h0UTi/narKBgCsyuQTV2eOKAMdEq1xrDJ/G3OXMAO+XSxb0rH+SO6WRzCexoQjyqHkr9XXA0WoS49wu17rgQ==","shasum":"57edef7ad07d040c0659e7855e73b0ac1269f56e","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111011823.0.tgz","fileCount":28,"unpackedSize":3058183,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTUvGUfXDN03HY0z998DiVFz2UfLzEDJbQUGhBVcLujAIhAN3B4lxe8zyBKdVvnrFl+T+0c9CvT+ewCm5+0bZXDhan"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111011823.0_1635852341307_0.14503128876547855"},"_hasShrinkwrap":false},"1.2110152252.3":{"name":"@bentoproject/lightbox-gallery","version":"1.2110152252.3","description":"The Bento Lightbox Gallery component provides a "lightbox" experience for other components (e.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2110152252.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-l6QZ4h5/qIrrV4rtTCEzpkj0eecTFjgCYQwx3epGaMtiCx+WONhiHYR3MpBCJWXcBfdhhRl/6PGW5v3ikFlZKA==","shasum":"9232c822cfaf5aca8b155631b1a140afc96f578d","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2110152252.3.tgz","fileCount":28,"unpackedSize":3058183,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk01odL4TbDY90Q+q2ZTZD2ZJ5NAkkaZpsnNALDL7sTgIhAPtI15vvtI6o3Wd2+Q4rJBVXWvpUWzqJbV0TXQPNqWDj"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2110152252.3_1635890659945_0.1852917728393444"},"_hasShrinkwrap":false},"1.2110212130.2":{"name":"@bentoproject/lightbox-gallery","version":"1.2110212130.2","description":"The Bento Lightbox Gallery component provides a "lightbox" experience for other components (e.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2110212130.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-UjxL3XutoHM9ax+n0sSL8D5CsvNH9qL8RvXpSAaW4UCvhMorNsJU7HAUQmNFmmvcERc11tjscOdI881Vcw9huA==","shasum":"f411dbca681b2ca9da2f288e197c02f2be4d0e49","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2110212130.2.tgz","fileCount":28,"unpackedSize":3058183,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcaOL2CbNTg8ZoBVr6yp+g4zZaOGRcPWakHvFxrqca7AiEA42MMqQ1JLjABlaVgM1Ao2HpcnenJbrPXaL/9KNCbvaQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2110212130.2_1635891271683_0.2048237428188553"},"_hasShrinkwrap":false},"1.2111022043.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2111022043.0","description":"The Bento Lightbox Gallery component provides a "lightbox" experience for other components (e.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\n# Usage\n\nThe Bento Lightbox Gallery component provides a \"lightbox\" experience for other components (e.g., HTML images, Bento carousel). When the user interacts with the element, a UI component expands to fill the viewport until it is closed by the user. Currently, only images are supported.\n\nUse Bento Lightbox Gallery as a web component [``](#web-component), or a Preact/React functional component [``](#preact/react-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. As a web component\n\nThe examples below demonstrate use of the `` web component.\n\n### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Example: Import via `\n \n \n \n\n\n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n\n\n```\n\n### Usage\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section,\nthen add the `lightbox` attribute on an `` or `` element.\n\n#### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these\nfields are automatically read and displayed by the `` in\nthe following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption`\nvalue as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as\nits description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\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\n```\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Example: Import Via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n#### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for BentoLightboxGalleryProvider\n\n#### **onBeforeOpen**\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### **onAfterOpen**\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### **onAfterClose**\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### **onViewGrid**\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### **onToggleCaption**\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for WithBentoLightboxGallery\n\n#### **enableActivation**\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### **onClick**\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"f4d548031e8e20aaea8ade649d3394d56518b769","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111022043.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Q6oisu1dVpJI2weOD2lolMF2Ghb6eyoZQzRrmvCZr1OPh/ujmyO5et90AoMQX3niRaYcqVFrjFxCJyxWeS5IjQ==","shasum":"c3ee14da8ae2807ed576c6b403b25a532b70e5f6","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111022043.0.tgz","fileCount":28,"unpackedSize":3058183,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKuYTzDWxtggnjoLdaj7isL6m47lRetda3LlZn6WxAqAiAuynM8rEVnQFWg2pyw1I7nRRtAtLioPIosN8MM2lVDlQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111022043.0_1635938476626_0.23697074156873454"},"_hasShrinkwrap":false},"1.2111180040.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2111180040.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111180040.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-7s+ZqLm30QEj04pJA09oEQa4/UX/NQr81z6zTUOMR5nRJG2KyXUWaYQNwvR1/b/i2sIOKwK2JNRAYMwlwgS33A==","shasum":"7ee62a98d2a65f4386f45329ff88d62529e750ee","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111180040.0.tgz","fileCount":28,"unpackedSize":2894350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsXJCRA9TVsSAnZWagAAN/MQAITwG9TXZLrELJS7zm/D\nVwR1/x8LjRkwahZLON5JiX3ebR6u2UFjLiU0WXbuNdSCSPbydOnDkxyxKlRX\ngTnGcnlcE1/T9zhlPnTUm8wkJrXy8TerDITSMNbTHVozVHijWFPJXnycwRqY\nUAf8rdD9iP51TNJdJIyPYPq+gEtS/wxJlUboGAkCmU6MS7/HbSwUYqej2H0a\n1RwYxhL+6ybSPF2FFrpe1Cv7SjgLv4gVQVZ3IE7GmnTvh8m42ne1LVB1NDcR\n6TZ3wxPmikmSCBtz05vP4QdWAIwurrlx3RCN/8nvhMpHesz9TEHxSAY6QAfW\nkvQIbNZEAIw81y2qqFc6I8CSvOG49ssc0pYQ51s+SyqQXCXq9RxBCHC6924y\nPacs4B6RoPV6cTZDS5LGmgNsu0uhA7b/66uxQHQw8+W8n6n9Kep5j0UIl6xO\n+XEbxeTZ2ewXSrBPalnPNPRTSc8BVn0dErW7gw4Vh1L0bC+cRkbPgBqRtJ4d\nQaZKpp0BhXvIv32QvSSNGdLBidVixl4Pf/LAleSszRPYF7l6aCTfsU6d+qnQ\n009sYoGGfdrI6bqMx3YfJownr0rTv/F7gp5rN5U23XUzVQt5sIDrjkixqCfi\nzynaGWMTvpfFjn1dytZuT10+bFBt60ZiQz9HqeLCKB0JHSrMtu5XZAeD89Ft\nhlzU\r\n=NUag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6clITtXVXPiqtxs+op8s0Y//+iJXzDNgHdnIokzW+9QIgSvtp96Oygol1Sp8CUKOIAd0MCYcthOZzF8aSIfDOH5Q="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111180040.0_1637270984907_0.22611323811725792"},"_hasShrinkwrap":false},"1.2111060251.3":{"name":"@bentoproject/lightbox-gallery","version":"1.2111060251.3","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111060251.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-00fltObpLr/GiDwa1BCgt8+uR5lkyuKuH4wqZstm13+bqoi9rOOUVYefMFlDHba6mR4UI2Ks/4/fEQsAr55obQ==","shasum":"941e6bc9a69a778f989f9e88cf9a01d70389f427","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111060251.3.tgz","fileCount":28,"unpackedSize":2894350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsi4CRA9TVsSAnZWagAAoKQP/2NB37CbbfRif76LToeR\nNBbPieg839wH1i+Wy8HHyn4YEE7L58ZaRehwsKIh+uddAG5PoBksFCPJiT3C\n7FnYssq0r0xk6IGS8EfOt4KTo7lFsX+U1yr1xjSQqMJQPkTuvXlNZ4FtzcEK\nt2LkagjBGILGpN8JLHGlCW/VEpr3IkO3MOGKPQArmt2+KsGZicc+C4cdhJ6j\nYVQQQxRBYVECHIi1CkJCltq+yrHRPl7SlhP2J9O2IzlkaezG2ah7e/AJ7w6S\nX2ZyhmyblDJv3ZBHWG0HalbrSRc2Zc0Qy1LMWZvRq9uLPAkceJKJEARfBgO+\nTzi/zQ0pvWKPwPQ1e8y04/hjuUvI3kyh/KRaPE+XU34TefueOmGC55jxeuIe\nZd/UvINYfEw8IoZkm6dE8oMJxuG+eq1bDE34pn7pxChfzcfyzP1YWlmII7yW\nkgBL77KUjC/hEUO0eokql9aRqX7cSt/4HxlRf38Ewpgus17NX0FE99Zd9uWs\nYkoDWeoKNfGJfkP7VvxWH1uDEliwmcUM1aRPUhBPW0W3JukHbhOhKbKg6vyU\n6gLVUTov8Wj8UqhUzrrEXlQjvgxCRcBvebCtCFrNq2FNhSRT4VLQmYEffLgU\nRjV0firAiR0iHRnNcK89wAo0/26eHTo6eV2dX1V2QJ1d6iuu/6uOieyUqFsc\nxMUa\r\n=7k70\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0Bneo3eKTlbkI0QnviVS+A4NIuXZzsY97mB1TDQ76aAiEA3D1hVr5OjDPKbK9lg9vSvh3wBbkY0r1NHt0MYKdtp04="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111060251.3_1637271736437_0.6910999157142723"},"_hasShrinkwrap":false},"1.2111182332.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2111182332.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"34ebd943d9b16506b7a515b38941fdd8357bd288","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111182332.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ovo316qHfsHQ+UCkdv39haT1DhtoGf19yptNXcOAEdHZHQWZGn+L8OnhMFUPvzK0X1ZZD2zK1pLm9SVUAOcwJg==","shasum":"4bb864e81e50d1157e223c32e908f73109de0868","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111182332.0.tgz","fileCount":28,"unpackedSize":2908254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl5d0CRA9TVsSAnZWagAAOb4QAJQio+OXLjNe0R45yEfb\nxKJUfrZUAurnpK5xZq1CBNMMOTzJGUpTcLEgJe8DUnljZtTOGprb1q4U1lMv\nr6eLwmP/k+DLlCYchEaM1bpyUrPIglJn7lPglTFOPhwOEYEk0P4Z3kygQKPV\nieB/YVYwpRrcnbcdUaK123aSAR8cnmIQetu989tW98KtyfrxijrhLuVPoiDU\njA6Ms8Vx/vqw4g9a3sUZ/RsJmv+/njTpvbJc5Y8SxQzHQd6sJ+38HCbivuGY\nfV/JRLqtfSMuiznLBOY/DN/MIUNZ9r3LEgIpKkTmuwognW/p6y5ohWOwq5QM\nq+l/cLVAlJc3YsaRUfh8jbctLZDSR8/k5Da5uhngiH19IhKfD78A1TPsBHcb\nOCd8GXyBMu737SslVHaWVPcDh5NVVRsGp8FcdgulIAYAXLqDton4wZqum+UM\nqemDzBxHUtHFCCH89mci6Ag6nPkFr/P0yJlziomUJOw+T1dB3WbkcqpY6IyA\nNfKIcZREStYHEbq+LhqrYsPFrCbwReTJITnoQGeuLL/cCgr5VNf0m+D8hQik\nock/myumuNJSuyBR0ipmzMbdJ1aykg2Ut/3Sd1KWxvMQWAWeBmEPYhAQ+16C\nBGU7QN+0PV28Qbv4MOKS1n00mNygFwlO9aG7GNIPc9un56NZGC5DQklfGmv+\nCVZ5\r\n=9OOt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXpaLGVvVTv4oc6pm3zUfcQ+BnaPisdnJjJSGrRJSFQAIgNU/NicwctGEejNbJbEkjuA97WWDVnwNUwiI3wfyCwU8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111182332.0_1637324660340_0.517720018372809"},"_hasShrinkwrap":false},"1.2111060251.9":{"name":"@bentoproject/lightbox-gallery","version":"1.2111060251.9","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"04e44a3695f8db307eda69f753e10665cfa70fa1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111060251.9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-iaSI0jaRcboXlNwgRTuMvSVymIk6kVNJZFS65sfLkrvuTELJUeg/R8y409o9N9VKsvMg1dYkV/Ox+zlSB/0fsw==","shasum":"774706eaf5acfe88491fd989fc5baf3e15d8956c","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111060251.9.tgz","fileCount":28,"unpackedSize":2908254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl9F+CRA9TVsSAnZWagAA9GsQAIwEG5o6a+14PNelNzzc\nDWQoSniypbsRe6aaNwOCa2BQrbyNDIqVkxAbhC+1EbYv1i7S5n4a8NZI9MBs\nUplMhJhrLtdDZ+xhGJK2OhrRKMVF+I/tFs8s/ADl0omtUlDnVFRoL3S5my7g\nf6lutfgiPu62myTM+uibY7dHd1+PcTImb/caVVG2lUFFyZ4X/EovhmYq1sSd\nbDEp2KklMwvh26hcKE8C8XpYBJZiZA0c7H1A73WeFssav6aNhgK0Bpbam3A6\nyLGJHQlxshC84RJ6k8Wb3rfVjcs0Rr8Ig2XNSMwzRYrimx+W+PpyPz9Xzmyh\nAYvVDO9mPFhOADu8e8GAiyAU3ChFTQo8JPuzclBmRVROJCut/Hs/IEoeUN1l\n4BwKduSFQ1Iwc3Bt1nd1in4puwWjkKmgB7DT8GwZ2SPJIXTnyOsc5JHr0OWP\nyTlqW/jwuzaavPI4FoBfpnyYZRi7jvgtuh14PZslsMnt5XTXb8iJBNMOZlB3\n6NlnqeTVDMevqNTxKal6QsEjI+O3XgYHJg5Mq6JjMU1tt7sdEg5foepgkGw2\ns91JT8tOYdXmOD8Y76UAL8aOUlHbHEQLLOH71eQbheqcEY7BG0o7c6halLaB\ns0a5T2nfL7lF08/4enFVGo1TlezDMRfC7kJ9TTJ40LrdbqSLKHH8S35QxcWB\nodc4\r\n=5c3x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI1+YCmch7tDPuwpZ87I6n82zodsjt427/GkfQudasrgIgD3Li5Sx+Xe+8/4DWPXB/kvNXE5m/Nuo++vGW/pJ4Zn4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111060251.9_1637339517962_0.8368361858374298"},"_hasShrinkwrap":false},"1.2111191951.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2111191951.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"22d6da19b9e01e75e6b67f54cd425c465822fe8c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111191951.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-4nRm9VG1apVayIEobktnSl8CHxszPYcGhRZpTw1wrWGahx2/VntJqqqIy/AKgEHoorYgNq19h43VK2uISMi61A==","shasum":"c54456d49e9d1ae2bf36d0929ba47c102022682a","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111191951.0.tgz","fileCount":28,"unpackedSize":2908254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmOjlCRA9TVsSAnZWagAAlT0P/0C3wNyaMEUnkb3Jxz8T\nwFGQEGjsB00NGqvuOl4XcR2qDK21N5z7aJ7j8/UIEkVs1tphpyjbSNNbDF/7\nA0emGLfBY4MbIkeE+NqTg9odlocQ/Pr5z9tupu/rszaBRwt9nr+3ekXLyOX8\n9kv95PuDIqsH3FC7t91PNREPocweHl6J2HN6lqt9jSKdJl2p4uofNaXyMSBv\nZFQ0RBXFPkbRCoWFkO9JovBZbAWp3B3lcBdYNjUtbiJKdy7Xi39wG9G1FAJJ\n+mXIK6TgW4eFuyYiWZlpAWehhMmmleex//fuZNySY+fLjBDev39QNJ4PiNLu\nFG3TjZBVNwfV9d1z90lqlx11Gi0eNzwHMjXbMY3ZyqNXhfJKjdNA1W1YllST\n/gxqddHe3Y5wW9OxFC8NHU7V3aAGumDfDut6racdznZw2BdT80frDUzDsAah\nMPdrw+vpsepqaLR8fZABaNwcRpMnQmH5G7RTXx84mQqTkmj601JcKteGP1lJ\n0823rDJVfySeKR+EidNrcEB6cgT42qEyip7lfKcA40xWaG6ODz/do7/IbDQL\nJvFEW3rq1TFP+k3J2H3feb75nWBfT+DLyQW9MjViIUM+5xVhqwM2PW0tyiUL\n59FZfsmwHVtbnpeGlinjRR4ZbT8qwm8C/ZrxNilOUaUWPqgfpRRn0jqWbcQR\nWZjz\r\n=yw+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDyqVYoehqYhC52POz2FSJ963Ccbzvhi6X6m85DCAMJQIgWVtt6jQ9n/myajWPASy+88lQcr5MgxSJPvqiTPrpJtg="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111191951.0_1637411044607_0.8379177236085598"},"_hasShrinkwrap":false},"1.2111230244.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2111230244.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"d906c0bae3e05aebd88696b9659414f63c1ca45a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111230244.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-wzXbZkifFlfXADSsuBoNF4gyuYLeQTj5LpM+h4vSxf5Awii+4zSDSQ7dd80w12UM0g6axYO+SpemndNDPRvIAQ==","shasum":"c80068845bf7d62710b4fecaccaf55d6989a9eed","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111230244.0.tgz","fileCount":28,"unpackedSize":2908254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnN2KCRA9TVsSAnZWagAAxPwP/0csUv/GWziwBrtruZQm\nwg5dCmNZVOZE234n8A7Xc3C66PZ3o+HHmo2dbwQoO7D0eyoeIetSzAWOiytR\ncJFBNy0QvwnyulkW6v0X2POMxBqEYeI3QrpxykOEfiEEOKuwE2UpQAlwvBuM\n3aZpm4iK9+7t9b4ns14AYAD6t5x9BC5GUBRDkdRKm+wn6Sv0lBBsFZHVGddb\nLB343d3rrQr0OoG//rDz6NDRdcuzeuW37uhNAdGsqxNhzrD5UGYZ82X9wcew\n84rOWLNk+e5LkxL7oUjpH2ghd8gUiXldJeyit00OpvEA/Gy/GFooDIG6W1kN\nCV6ugB/EeQzFCtcfCJDSzRJokUK87+dlGIx3xUEblWYDMh7/Vjioc/AS+Nzl\nHK9kfLO/jducC0QpMBgKVrKjPfTIG+m28FTcGXgBUz57JAngp1X0vHYfapw6\nAwm7ZJTGiQIzU6WjaDCo1+Mh+CbBIxXZB3Oysn8826l8nY6xTMz/8kMvDXtZ\nDkX2OItmovKTTxlaVHmJgi99xPLX6+gH4xCfg7UCUBjFSOia8HplY4T1TjEy\njWwqsc/PeQ+10vFQcs4KVsQWekA5ykhaWbryiU/uroJPpdSEvSnGMfdhHwfo\nGPIjm7drAVEfhkmghuthHh6IDLLkcv8AAXv1jcJvKOPQXGPHGyRcg5/JuLyl\nj6mG\r\n=DcVP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjidTE3rXwflgUslBMfOEQ7TUxYcaAfiwq+ZECG4K/ogIhAP4YzTCVFUqS5tglhlCM7x3kwcDkEkn4GHr0ZgGVlfoI"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111230244.0_1637670282160_0.3144305802142884"},"_hasShrinkwrap":false},"1.2111230636.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2111230636.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\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-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"46e8f482bf5e3008ef07e950034d194c48317990","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111230636.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-5d4STxBgjHUFAnExVzhVxndH1dE0OA5vK34mfBPGmygG6tWGwFUvA4kAiNDBwvZvDK5V1y2ZqOxxP5mQYlXDVA==","shasum":"dbfd324839622cdb6f0c31a028bb989a01ebe9ee","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111230636.0.tgz","fileCount":28,"unpackedSize":2908254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhni6JCRA9TVsSAnZWagAAEcYP/0tNBtLk+Uu/lq6UMCJ0\nLP3cbns7Tq9NqoECWC+KlQs91JYEyYWlts7W/UjATsscHTUCGDjSQjuRCtux\nRa+/0CKohwU4HGbAmKp38pm7hzWIjERpXQriiNCNKMcm41jH2x4GP+dr9JpE\nce8+U5pFHKnPyUppIlejbh9efurWzz+EJNC0NCoAk78sV461aFYBuk8oauWx\n0Lir2W6R02c3MKHWhYyBNgTna4VUmOySU+HvCf4cl9soY5AREZPlBGQsbqay\noREbfYCD9Qoc5UP+FnlEYPO6filNdQyC7SmTtt+g5MAH5pr/p9O8FFtY18HM\nJ8W9WE/X0Z8iMez4LJULwXYxQcQwMVGujh3QzIEzpaDSNLzKb39l+kHjZUs7\nBAGxth4fDZ1iPz8kg8b+IWLztWkgf3/a2hvYjb8tbXxsg9LQ4OcCnYGQ5WrO\n2h/e4axmUViMwyexZYxXSrdAQ5IDoriytLeT273V2C8e4/DXCYvVH7KuvZO7\nvAjHetPv/xeGu5LLqtT+8u3je6G5gN4kuqsIG6h4Wnh1mIKM6xcOjsF6VKZO\nfqltaa2s1M273Jl/cP8RgR3ihFTll51Bx9AeN08yV2cALBZkFAIXcguDliWq\ntFUwBjhvVEVF+CrcP8JIXrRq3k5NE+QfQIq22rTLX/q5+BAAYPfu+aUwjcT2\nhdXx\r\n=o4mr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBBzZZJCy9tb/YsMp91oyG06+XM3MApGGhJOcTuLe/gkAiAPODOjfm39zETBa+yWptGaJsPofIjCU0WodYOFmghbYA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111230636.0_1637756553103_0.9767778065995538"},"_hasShrinkwrap":false},"1.2111242025.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2111242025.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"b78e8781ff3976b3bff1ba881cf66dd2609b5c07","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111242025.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-pSD0P+TXhjJyaoXRjRuqMI1gGKcnNJi4AG3irD9PO90RHA4o6geIcLBOtyYNVzfqbUz5Gyey+heCeToNkInFrg==","shasum":"88f50d342bc017557a7c374c5119df153daa90b0","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111242025.0.tgz","fileCount":28,"unpackedSize":2908211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4TVCRA9TVsSAnZWagAAALEQAIg4rj4UdN30ujpB43+B\nQyQ9HzLvBjvrPBZMol92dM82VM1iCSASZUN9jZimtrN0c/TkCL8EGT3N1IM/\nspg/PbeiZL6kkVO226B3TLIVFykrTf+I2zz2l6h8881bEvalbGL03r4oL1bO\noVP3SceBZx3+hqOFzImxsMrYLB3mFnsBzrv7MBDFTF4IViVqAqDBlrzpW58C\nksQxokwHKMei6tMiqXlAGcrLC06jR8dJsqsnF5jYa6lYki65oISzQQWIXQaB\nICLf+2jY1gsHC79pmStb1yGvNIKKIGYrQIUr3tEMbszMrCeNs9rtjHEnUPqN\njUX7mDXQUeLiHOanskI8BUb3gmnDaM5k4iC2W/upelecT2aNhXlo5MhoehOK\nGPRQp4+WvXfAJLSvCoZBteQ6JfAihvOX+Red/3pgik34tuJEl+G8O+KMPYEr\nirLRVdQjaiJ9jOru28bITfgLhoufU4sHTE4zUs+Sx15OYFeQVF5NJXGbLjca\nSTUyXxNcvc3EKljALl6OeHXXGwNpgksuEsGpyGZcin3KK5xK+cvRZQJEUTVI\nguFlhCXokkwOp0VYRr+oxJfcaG4alMR8VJy0RrjQP6exmLh1ytHY0OGz75V8\ns6K05ZKLwe1uaD2AbOpl+2PvhXmQ6DwTEMr26lH2auOOvV8kepkVQ9miBY/G\nbjII\r\n=2Xbe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB+Rolnt02TpiJIQJ0fUve8lYnIPVOOPKTkxy6tzeQ5DAiBlmcpD8TI0qbaQt2i5PU3506U4XcadmpolzEmn9hJN/A=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111242025.0_1637844180833_0.17846842270482943"},"_hasShrinkwrap":false},"1.2111292120.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2111292120.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"e938f7c9446e2d1eb0f0f865c0f1ff42a4be76c5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111292120.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-6b9nWvMBvaSrKpJGMhdjacQDBd4yk7bHJ2c+xVvZA81mdip9n8Kt/MzwrIb7RBF7wTM0aNQ4aj74Kb17fum2ww==","shasum":"b0de5b0e7620f8c0739569f817af67b586ef7013","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111292120.0.tgz","fileCount":28,"unpackedSize":2908211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhphvDCRA9TVsSAnZWagAAw30QAKBDDPsshO2x0mRXJlKd\nbF39ctPRyrXdwydLVhrghsqt7Ds6VdaYwEQXNom37WXMqoAor8SCn0+CABQp\nkyjTOdUfUSvEQyvEXzC0tLakvBcmTVPXMEOQU+gxHxj9Yo9ahoOpVJzOKsq4\nzBKFnfRqZOvCZ/9VSVlT59cqfqKwDsGmHBHg+e4aiH/5T6ypkqC9KXyOuLwE\nlPZiTHJ9tozB4W1LUMNzfDBNNWZsDNe44pALb90kjdq6z2j6ynR2mK05ji37\n6oNJ6cHaHXBM6pfzex/wXCJMINcIhCBAV9S5OwhZkIgiPYhkOxeo73uyd7xz\nOviIyXZoG98UnaR4Fj96EUlZHbIrNpS134NedXZ3uJEX7Gzxc5rRmhqD0prz\nN/vBDRdva47zs39LuInnYrd5L+nNDIopspBuig7Jlddgno3uUNpuldZF4kyc\n4hLA4KE5BQ6yaSqMcrS7UQHoc+2p9oAMLjSHSEjhKM/RrTm0Y4iQr/ETkNUH\nj4gXO1fHkz7lCg7hSSRMOLtvDr9HTn2LDZ2wuVUGgJnc589gYEfTFsayeOa9\nX8UpNUTNHFlEQTU94UMPc/9tDqfUv0qmzZPi/O7Yud4rIjx5XZz39JwFbnqm\n3yGVTahCcqYmGNT6uGhYfatVgeG9HxfOOA+YbTijIrQ0AcmYRnWGM9gGbWUQ\nAiuz\r\n=eVg3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+0+2VBQRQAu63S0cuZj9hIQtvciRpwjrnceFVGCdZiQIhAJUIvoOeJIWLKZXQUrG73ruHFCnfYUw3WCNjTZPoGSEm"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111292120.0_1638276035538_0.8156638843961577"},"_hasShrinkwrap":false},"1.2111152338.2":{"name":"@bentoproject/lightbox-gallery","version":"1.2111152338.2","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"27e204ed206cf75fae0a37d8f110b5fedb45fa7e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111152338.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-DFLN+PzUQXPLZr5iTEw2C0C/68mYvfFoIiR3xPBPsgCbYWk5jVqUO4aAOiyNTsqr6FUWrf+/6CibL0uZWVjwdA==","shasum":"6b040897f9a9485326705b74c8739d2bd9e32fa0","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111152338.2.tgz","fileCount":28,"unpackedSize":2908211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpmVwCRA9TVsSAnZWagAAZygP/3UR2XRiT+kdoCZDLgHX\nlmPYyffj1CaeBe8niXirQCS1OdyQBCwIKf2/6lGaX/kBRb7oWKQ8OzV4y27N\nUBPSVa4Hc51KiZrPcSIs23Ct0SRw71OcVnjRCk1KrZEFfezNCx7gtUB/cCE+\nwjdN2JQdrkva7SrGeGWHnB1RZCJaRkolIWGdPJ0AbbgEB7Mi8dBj6xoMlEtS\nrNuQGkAGhqm7+fHAFeFk4kZtGdxvPTGXfc9emupNRsXG2ELcAqD3Z8FjgnJt\nTcYu/uYsq2Vod+SRNrmErrZyQIr+8Mtn/ku8hTsK3TzOLmZoYp6HvSGq/2Bv\nwXDakIopMHYClMXdAmp9Aoa0gHlsE0MUVnnW7reXRgo9UebABCoriDMHX2pS\n10cqrRj/8ul6uC+VfvPm6iXocvdnDTCttEBNjnmXBfSq4ZhLRJzE59svH7WI\nTpcvDnSNXhohwS5wqnnO3KBMa80UxpsROXiJ1DIKSIqh2Usk0ELOISl7hqxq\n2g8Fsb3TA4E1++4uU0B+VDkIr4KwS8xUOJRUTDNJ247ueVKOd9TJMYsidMgB\nPvxN3OOP9TEIob1qjJiNjk2WVH19Dn9Hi/8sTNmyr0YELzyADWUWlGciMkJD\ngI1B7tx50PzD23f+qxkdfHJ7PKzFzbVlhCIb7TYITYj/tZYyrLh+0R9Xgl8/\nkrxq\r\n=qaYd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR0YZBnMgUJo+5LvOCuohsJgtStMgMEHyq19xxf1+U7QIhAIbWns5fmcKHOQC1tksyoEEKYdmP6wJDo3JI2zE9LAzz"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111152338.2_1638294895993_0.7041720118616395"},"_hasShrinkwrap":false},"1.2112010058.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112010058.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"6d1060a3a4288fb99047cc700661d589bc9e2a01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112010058.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-3x5xYU+LyE2P37ij1uwvMXD5wLqQjZthoF5jmt2nQetwcABVMPVMewDwNlTrDR+TjqaVWezXTxj1uzidQicVBg==","shasum":"de1f032f013ca6c824add67b2aa94c5913cbe9de","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112010058.0.tgz","fileCount":28,"unpackedSize":2908469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2g2CRA9TVsSAnZWagAAutwP/3vzHWM6YZSM9iRzrPi/\np1sMoPmxHwUAgpAoi9ZGyncLj+gq5wsnYbzSCh7EEjTT/w7UaCin4WxfM5J/\nm52K5WANTQ+H+jSkzLBAsqTNMM2xbvqawWKYtG3nvNFHPeXODDlcv34pMNuV\nrO492YcOkzxyA/JGLaKyrihjFmT8LwCSeIln8aIxxUs1dSjzvecbdw88y75H\nxdAFNGKEcv3/EOJqaj3zX5xnMFk5g4BOKloGFKMcXOthVDohp6wf+vqCQKlG\nl0DDJGyl0E/2APYMEQiFSU2TrWu7LAKbgFxR95P52YbTeZTPMgenwsUwUQUq\nggSThvVuEYcAW+hfX2POnJrRSpKwp2NMJ3wb0K6VgZSPezvz4T+RkxGtIZyp\nEMHWuu6llMkp6CfclETvbUm4p2lLz0TuAclS2KOmGvgKn5QYEarXuEpY05kT\n5jw1O8X79QgoUMZw5GXMN07qLAViAIGxqQj8D0lmBTRYigmhKF+8cRKhDnZO\nkkF2oPgxIRMRS36jtUktHpWjXafuH8hZjWYzVTt+nrS4FyZsEDKPv2Rwt2de\nOLq9CRMBm/3ZNjGiXNw6Y1iHykD0h6Y5U0m94pIk5RtQFz8mvr4tdF/Tn2QZ\nn//nVftyvKtbbAGhm1LVwWOQ2VVyi0qiW792OtLcR5PLg26Oitz/3NnSXjIR\nHOlm\r\n=Ihru\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7m5gnuI+xbRx5PEjg7zo238xQeobCuf4x72jDN1PoEQIhAPkdpXAn2ZzXVknXt4Xva70KQj7TdDjuDvyTtNt4ZcWY"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112010058.0_1638361141955_0.8814339707309296"},"_hasShrinkwrap":false},"1.2112012300.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112012300.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"4ecf84d856583465c1ab59847234535fed16d55a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112012300.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-MJYozq5/JdpXbNAei+FZpgj/IwENsoGsuj8im1f+fLrsrn8bJM0JnJlbZrJVHrxunawHfAwMlf3vOLe2NecuMQ==","shasum":"3e9bdd8a79ef7a108566130480697c80fb7472db","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112012300.0.tgz","fileCount":28,"unpackedSize":2908469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqLx5CRA9TVsSAnZWagAAYZ8QAJs3RsefGRRdjCnCvnTM\n0diT9NEv28Lftg/F4o7qLg7Z0XmZFE8wEMaYh/BROC9h5/aB5toqIaY3bdbB\nHWAjL16fbjaCBHQsYLBygJSJRzGSWyhJcxvAKA8L6EGBvxWFYBflNzTGZ7eI\ntABgzIip7zG3WnO09XdTjX1/K6W9WsGRboEvyXKai6tmE9V4JF9S1Simzo5Z\nbtYwvmwhr0tYzqoVou+j0+HhP4lulypaUa/ltyc6Z6oQXKSW4a4/cUmk4Fjk\nnMv6aWfIFyW083Rr1ppLFD/sozkrCH/qvqx01+qLhc/4Co8rEjsM+gAMeM8j\nAG6I90mArw7iGJqogLacNVVP0Y/hN46igLpU+FSolJOyJ1D+lvC0/M43mAka\n84NWird21D/G8C7+ZphHqwmTEOxtSt7azbsuwk/MVQmKd8WpQEb/8LudT44j\npmoYzrUosJFkbY83Nkw9GwlVups3qFjFapgRGRBjHoz27HKPPSdrAdJ/k2NQ\neg7EQn666gNt4ny1lQJ3STDomcZPHg4GWcqRHJEWKZuzC7WW4LD9zrhfX3zD\nEzvosfTvjOOFeRARz4QD7KRNDP6xkResdnR+rTxsHa73bAkXt98CHiUOO0Ug\nZeTMjyX2QeHY2cU7xBHglA+lVg8cCmyYNDSLzxu1Kj01Y6Gxt8gWtUWUpkUk\nnfvd\r\n=f5My\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtC+TxwcSUDB+hUuyAwzcJy5C0xH3c+HtjPRUCNMZ2lAIhAOzEF+KOSLLfgnysXUelnJW/BCeG42pEtztSaxqnvEui"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112012300.0_1638448248824_0.944678895235546"},"_hasShrinkwrap":false},"1.2112021656.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112021656.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"4a66d3f7120b51959ea01867aa68d516d5e0dc36","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112021656.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-t4tZD4YN6zQlCelpKeNTPofZv4eNXIgAy1ev4e253bMriQtlM431b6lejuRWZ/Stbf/Sa235D0zX+6K1az2ySg==","shasum":"ee6d74bb053637cc9bff4aac586a81a6a5ac64c9","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112021656.0.tgz","fileCount":28,"unpackedSize":2908469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqgv5CRA9TVsSAnZWagAA9VgP/iYXnx0Ty+H70Nm0WaEc\nkHGmVmsGfnsDxddvIOaTmBgf8srs38G6SARvB2s8odGWlB4dTmxVWqRqUAw/\nUpIHEzz4Ywe+fe0T8TKEE71q2m25mmcFBKuwKz9pWln3wAENk7RDRTdVCq85\n152+FtAMGRbBQdyntf8bZWQKwesg1Iuf1533aarlz5knRtLLHITzecUcyz77\nyj2sc39NqOmFVnO4+nm5Rs1K4QHnPwRD9FuoLk2z2pAk6pI5GekfCMVgCcbA\nbPbtNuJr25R3pW4nfbx2jmUzHUgxmuLraAffBLfxyLbZoJMuAc6GOfdTs2q5\nBdpiBc0TJmDFZ5/ypIC/Dry/66SK0kQRQo3sI41Kwr/E/c+aLNZUabCDGsLE\nfJdVyaFpuEOYLdtoWbzHKp7GZpYBl5Oht9+3XM/ylL2F6XwQV6kXhwaHvwDI\n0cmUs5XQ3Fu57a/8P88afwUBXCt8JxV5Sx8Uu4Y19aPLFl6fcu/9MR/wwNX0\nzBc9hY2zaXuEQ39C0k89le5A54B+5ye22pVzT5knB9ElbKbs7DDBsr5AfU8y\n7BcYxzsefi+NPkCbYtE2HMbjg9isYMj1KJPF7R5mkcd1R1H0URUey8+C5GA2\nBur+7aFJwyR2IcD+Ia3H8R28mgiE77eiDnyM0cES+wVNhzuclwvxKX7zgrmj\nqkqy\r\n=6kt0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDc5YPTONxC+4TMm63IbQpuNF/ZMgGNypcHx5ssgKUwXAiA5Kyq8vNLB1RMxlhbQlVd3w8q/H1Buxssg0cfeuw49gw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112021656.0_1638534136822_0.12738122068032354"},"_hasShrinkwrap":false},"1.2112032204.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112032204.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"80ca53e97f8ac619b78398d429e0031f40cf68c0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112032204.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-VprlspcwexYL0G3f2dXo6dIu2mlal+1gE/S2SUHi/ABul7JkST4ZDw2DzEzxru50Fji7KDTKTywMJ6A+cbMJ5w==","shasum":"f18549da0948d145b7fbfb434a0d13979136265f","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112032204.0.tgz","fileCount":28,"unpackedSize":2899176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq1z3CRA9TVsSAnZWagAAPxAP/RlH5K6VNUA6gK/mvmBh\n/G4y0RLO2Us0k3xP/nmR4faJMiK/iMuezBhuGuQt4715nAJl6Fvx2Hbj8FNt\ndqe6c+zmUWQuFMWOrw/DwBG9YEAjnpGtFyUcsPXdU5C1R6eSySDD+M9J1jvj\nXTA5SEp/pZbpQZiB+SWZ7mQXTVH5lgVV47ZN6ETVePP+D1Etas78tYHTglGL\nlCEUFRe1+1HUdxMWxLWHwYgC/a898aynR5I5YtVnOkvDTsSgyg9fl/prCDsy\nDqnWQGUyzaC3ZqHxowccIkjsYDkRrF11fFy2EdEQvnK/HRB17wgBUySPB4mE\nfHOeMzvT8qho2fA6+3FTOOmmTdV9qhRKPoo6FM8cULi6d/MlvedhqcDWywcx\nApKNL3fqnj6LE9LSq84RoC+t2X8fWAv/lDjkaenzwJ+9MzVtxAI/VJ01ur2/\nvexuAYiehthqJdQWNLQ1ahvmrj2jmIEVrszBGIEdlxPerMhrCleg6UtYVrNM\ncrIVZP5Z5rdBe+cbsQbEUpSoLwESKvZZTwLJ2JPtIpEr5KQgPB1jAOqKC5np\n8hO549AyzIp4mMiBCWh+PS8wJmyaqm326PF29Qp8brO3IrkqMU81S+FAcynH\n9nOFzqv3nDvRQql94lsPqvCBiYFGvUW5pQODf5f6k+Yf3GZvbsscmUz+UTJq\nzEsE\r\n=nRJr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnyB+IexYWpLjM/39caK9T0HpNuUCL5GHlkHK6UNhKHAiAWbfyFErNVyRmeIAmT24B76yU68ru9hz9EmwW6WVREsw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112032204.0_1638620407606_0.9248425395098379"},"_hasShrinkwrap":false},"1.2112062322.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112062322.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"cddcce65024c209c9420ce0567f525aef4fc971f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112062322.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ji+Ga88uPtC0TJoiDL9eoXdwStWywCyHJSMK51n4JX5Ediv0ov/r0E4BKUV4ECPm7Z2D8dGAGITOzNBvctlNFQ==","shasum":"e7eb7b92f93c2503d1f7ccba027d1b8d74ccaf3a","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112062322.0.tgz","fileCount":28,"unpackedSize":2904631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1M6CRA9TVsSAnZWagAADvcQAIBjjBt8rHU4OBAdtKB1\nqIHo4o1+7JPgOGyfAkJfzRCZ2JNG6/2s4gfvt2aLQIVpTfzZeLuR/3e6XTby\nDfksJPpTH9kaNDI4CIARmCFYqUwR5/b88p72Ehawa72f4+F2YpbBOwaUJUMo\nYJtfeTGF2IBkVj/Tu0cAqoFOlijOrhdNkG1UEraxlWceG4s5Y/3hVYFuACIV\np7XB6/r6TQuHi12sS07OwBbeC+c3J086eShdFWR68AUG8eeaIM1VvQNUh9OF\neEXQq9J2BDAwE6rnQe5jDCr/dReYoZgxABKvbmGnkInT+B+yscSsUNkC1X4l\npzXAVPYB2Jh+4GWimbhQhKINgVuYCgzMLH3NX/A58qlfb+wFoQW0DzBixiVE\n/LSEMxIiXa378ASfPsDGdY7wKCA7WVPCDl3hDOBAudgEmsWMh1e4l+GQkUii\nS7no5NLeBQdEOdW8D44sZgvZEOO+8rstXWkC9olO9taEMSfibalRvYw7ZUbw\n0ZpI/7cGoRgrD7/22FpIvPOscGzy3aAqhFIgfjr6OZ5fNcFPafwdSBB6GP08\nyAXDeGeRqiDu2pN0qB98MCTGPIMwtSpiT4LGCpKL/O8jQ+/BvkS7o/63jUex\nA13qjAucFHvr2wQg8saBy6jQjly585mRBznNZ6MmGO7cGPAzbKhmBAJrgPCF\nMqLB\r\n=DV7Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDsfM+bMwNfAcUt5QKogfef2LMpVXsA8y68ub31Bdl7sAiBD9ug1UpM5DAn2HWZXgjg7QFzj7KVIbEk5pluPME4IAg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112062322.0_1638880058306_0.2806835742507705"},"_hasShrinkwrap":false},"1.2112062322.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2112062322.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f7475a0b3b8ebdf1b06b5d14e2905a8154e0fb65","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112062322.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-e2yamHmbQD9if6qU87ssOKIgQVs+vxCE8PUbuIxGB/CudnWpJ+wmvaF+0OeAHvPypgVq9/wchOCCjmHESViN/w==","shasum":"8548fc1ae6ac9e6491eb23dfe123c91666080adb","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112062322.1.tgz","fileCount":28,"unpackedSize":2904631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr9R7CRA9TVsSAnZWagAAjvIP/2sOvffLmYzyh9E6xU0x\nn6t5bjQiPJCEn2DAzgqKmLLLkf18o02xgHiNJUMOjMeTqz8Y6OU0+uHpIdAT\nkUhZ6X17lSmEB3mNUo7hyIrftpnvzt2yfnzajlOeJnOXAhMHCT1Gu6OxHNQO\n7hjCfX5EnRKA0fzzvbsAbEJ93daz2rzHZ28n15kIbckMpm0JlUj7jtT5IcSy\nQJFejg5SLS4IcyqVgZDbX+s4Ik6w/WsQX2iZVF5x2HOL1zQK9Xrkrpq9Bxd3\nFqtBQpylMxgbmKIlDqa/F+FuvgXWOQrn3hpeUgGehpGfS5Gpufv/7n3co/vi\nFEPCZm2LcnoeQ59/qA9E9vGw2G6b/oAjnNqBT51yXyPnTdKth9BUR64T0kwH\nIZCyzKu4i5JgZCFeI4MqYP80mBHFsjOwvH3HR2c0SyE1GDUKZpBGBrqtDCmQ\n5v6k5gA+86ANKQcxzHM80l1yC+PFPdseLJBz9tejI/HGzXIPr9uR9WK7lyJT\nZ19rBneboiAQeQcF0oGvKweVB7fajBUMKmidikOOYc1nBuG2ULG2K39rbiaF\ncm6hM2H55B6RlgeXWcgqZb8wY3FrtOIWrRes6KPuQvTPiPtgA19AZ1RJnbjO\nurnswHG2GlnJYhpW0+XbqFcAj6dr14RhfnPfhjmWRFejtu4k02FHRmSkSWV2\n+yyQ\r\n=ehf+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBC6MRnYs/uy1mnwdAZDhBJhTomeu14BEtgE4ZiHUapuAiAKIdA+A33La0ctVOnLag3kNVDAvzb/eP5btZU+qMfp6Q=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112062322.1_1638913147327_0.6289853656891902"},"_hasShrinkwrap":false},"1.2112062322.2":{"name":"@bentoproject/lightbox-gallery","version":"1.2112062322.2","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"3e8072d191c8771ac14d19f2122bba93b872265b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112062322.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-RxaVZZIk5PD3yVCV7/XVIKW7gf8rqtRCMzcCdbik/gOQ/df0v9WsMz/9FNYpeKII9I5XqJTE8eAlsFBAQ/GreA==","shasum":"ae5f860b0a4229a8b72827f5661bd9c3b3b3ac83","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112062322.2.tgz","fileCount":28,"unpackedSize":2904631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr+AzCRA9TVsSAnZWagAAA8oP/1UacyijP9laINXnvY5W\ny3Rnr47Lb31TQE5YHENj6lk9D7njZIctpXyeQWaLQKr9QgLyR9fsbkL6/DTo\nuY2Y3McumKlj2ZZUFXI2MpxoYToGMWKrZyFSRGYObZIXVJDexoTDO5FPtxug\nYMLBtX8Enxhc3Hs12FZuCsUPBsIRSAzAPiJy03J/QvqiihLxlfIFZ64u6qcA\nhm2DROUbFVnawduXsiMuVfQnJRjEJTvlbByNlnk/hzYaVubVcZZ/fuhmiq+6\n9PbcjBOfajxesuVv8hBeZ6uHOSqPpBxuINNwH7w113q9vQ3DntOuwH0Ji8dC\nBF49QXIrQ6BkEaXrULLBBr3RypvO+jd84+BF6E3OK03FZqV/M6HGwCc1cmH/\nbCcjubv6Po7PHQjkKw4tMQhK5nk6AgIBtM1pwGygan057hue3VFgRoncgGkV\nAgumnkq2pOwzWYjAQIWCvnQ3VCgPlx8+FDkGGu5n9BKAS8VrBpDl9M5AI10c\nB9etDr7H96en18iwssf+4lgIebrcuFN/dEfycQBRMzJl2D0WBYSO0sJib/SR\nIzugAg7gvv/MrnxLx4NclEd8gvTWJGowbfi61Nl6B/Of53Sevp19KoX7Og3y\nr09R23iiymyY7WWKhW3x1+hBJJTfBZ3zP0hPxSzSOUTD9222JmUUu7aQ8pqz\noo5w\r\n=/g3j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7nN0qf8lbFLzhntfBRj1SWNlaFbouxyxa8YHS5Xrc5wIgLV7WIRUaEgtmUez27yxM1HYaDjpqcqJI6rynscabvjM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112062322.2_1638916147704_0.32425593350203474"},"_hasShrinkwrap":false},"1.2112080230.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112080230.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"6d03180e136b7ae380fb9d5d3d6fd8c0d5b28e04","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112080230.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-eroG06fNNw3Y7H3e9eaakDy+dugiy70bvaa81DwWCboYMRLbc9dFPDL3VqVFmby4g+ETiArmbTwsIHn66Q090Q==","shasum":"e8c037dc4b31b0e1a2a359916ffcc1966eb4b35e","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112080230.0.tgz","fileCount":28,"unpackedSize":2904631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsLFcCRA9TVsSAnZWagAAUmQP/08TR3McOoB7uvGtpuDQ\nXMBvrCLKZvcj0jO5SuRk4UdeN5Ys5/Xj06aYXDqUqg6nhbHY75xxE501cKxe\nbPF+C5anju2lL64qmHDV2/uQNi5Z81KMfLlbXGEji4klytBf02euNkcDYqld\noaVWs/V+cCfValsXw6DZbtQzDEOMYTpN9sJu75PxEpxKnXj4WxLc7huB+rcO\narFQO1X4Ph5H/ZHu5IaaqiSuaPdoK80F4Fd1Nys9L41LqtDRgqNKEw5zZmwG\nlW1wOJBboOp/AgT46yGOKXaf+A9MdmzYvVkTzj6mLPJJ92i/kc/WVR3UuD7H\n9cbb5ATB03JiXWAMN1Ysx4Ca/fXVRJvQJofG0txA8q0gvZKJJPirlMIz7Ftj\nybvbPguUQ0vROgVZgAoPmPBBE918gU0gbMpmuuI5o9UxxvzhqcIIy8GVH50O\neHU4uywfrFkKlNNXN5JxElgMXEfvdf8AXZyKMg9aOciKki1d+vfoniTpz/D9\n/bwKiBt92n8D+PqrXFDhI2iXAeJb9AqSgUADikWgSfg23/CZI+LWDRQQ8PZl\nrVIeTBL0cb8+VbnM9k3304DSGQ4Td6TATA+Fd1sCxxWiKGIdmEzgwnuncnfZ\nFBy9X5YSR95ntSOfyrY5zSNmaI6rqf3g4pnNU/ScKxZMmqF4E2BnTe3eJmpa\nC59f\r\n=r+vy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCahUvIAmcSEYTt8jb2iAPDBDORyxUsZXQoybvIIyWxrQIhAMRZW52x2l6uzytFbNJT0XiRijrGlGqE2KwYiIX5wUS5"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112080230.0_1638969691816_0.5260397271450263"},"_hasShrinkwrap":false},"1.2112080230.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2112080230.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6268ef31f81697778937a9d77d4ccda3a561f39f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112080230.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-qoQQePDEej+30iUs2KKbCaxUBfEVQa/qGDqN6wfyH6M1jgQj3fYhq3uCBc8vZZ3nkvS+JpqjSSv/8nnxapCkEw==","shasum":"66b1e3de669c52f43134ac426d08886e71341a04","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112080230.1.tgz","fileCount":29,"unpackedSize":2907955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNYTCRA9TVsSAnZWagAA9wcP/3Asy2WsSoKGz6gsUNXh\nDNEbTmejj3E0lpc8cLjOOOoJuWpWnmVYfbBp51NouZ8oC9uSHk7Qrf6ruUcQ\n/piShhd9isIhK87YjPRMwFH9zFEy9ZS3Qg1lOY8BkyFUBJF8DjDrjwihyKk6\no1PattqdufnETWKyfGWYaI4UGySSTGzr/keBIVC7RGKSLhaMCVIziiwvDIia\n8a5H2LFJ3+NMoJoX5l2ApWmDvpboFVW2K/E2toYDJd+8DhfOr9vtrcXMj8CU\n+h0Ke9roHyv19wwa6YmFqR27unIB5FMu6oYjjf47XRdGhgLOHunva6ydkBwb\nUtXzGuBVC26cw7JaPXKoIknYMHnmfA3kvzObweqKAJQ03/x0VCYmkkb3p36x\nu2h1lwawWUcTgG6IW0pDeUNzhGlgYii6tzKqtDtRkr9PE8JPMlKCl2n8pt7Q\nFnD3OpkvBcHeo8Tj7gf5FZJDAsvTLkq5sEM48jawoXhXbzKjghxZtEscpuOG\nPExoTeO+6Oc7L6+ctaq5qGSDrmIJrt8nZXL5KVJA0hho40rlv7IHF3Wc5bS+\nY8dq1UAV/K97f3SfwTMYhIOa+HtENG166iFrCtEkQL6obDJkrizCSe+iNQuu\n3kM60OqYgSb4w3OZrMQsn8wVRvcaoG+nTq+93s/8JTZQMEcTKCqPDfBr5lTb\nNUeI\r\n=ghcw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6KqsvBU3T8k7qqjNSYGH/K0r7MIfrYHVr/E7PjiqOAAiEA6ceR+w1Dg9A2p5JV2TkdECI6D1syduAYibQAlsndCIY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112080230.1_1638979090965_0.9268233342429593"},"_hasShrinkwrap":false},"1.2112082232.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112082232.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"b7b1a9f9f7f0773645f4fbcb9a550233900046a0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112082232.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SGyI7UdqyC4qSPlnqHG92AEaPlc/AVoRVYG2ryaIKG33aeu/67/2tL7Fo3ayapnXC0BXMl4Nzq40rKQ1T51MZg==","shasum":"f4425c4d71bf74fbb1a0f6fc06eea77ee1492f1d","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112082232.0.tgz","fileCount":29,"unpackedSize":2907955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfp7CRA9TVsSAnZWagAAZUEP/R7Ic8+YIANjr1RKK0BO\nik4MQTAPIYKsGMEF4yLR9wKixckTqnp9n8tP0rWxcG4ziTdU/Vs9ARx4w4JI\nyyK1RJStnMmWf4VUHE3/5qn/J9bg+Uge4kg4OxkrGuJ5NdeovZJVba2B7LW6\n5o+TaTZB9EXvYDqeyivD9WLI7cmc1Mm2ZpRZxvGtTcWCyZ+kYKCG7+RNOlMP\nR4USOisKg7B24kpJnzDgC56PRuhGZWg/379oLE1ijP0IZAGvbwbj+OfSGVYt\nWwVLHdTAWvPXEBeqQhlIoGr6B4OIuUSiXJWYRs8KzeiEJM7S+zVCtTAKeBYb\n/zg/jQOm3boYyzPmC2Q2edeFO0HVeKrPF0c4mjzcvR2KuI5h0Ob91D91Ou36\nAQ1cm2mZRCphMEj3V9aRuyROa6rudtxiKdWtfdUNKurxpdVFhNMP5FJ1vRNi\nSXXTCw1EGi0LViOBLtHhe8JOgtPLjZWlheXb1l/n03G5rz/GCsx30QGbUu5e\nE4Y1jrg0IaORc0wuOM5hSR43+7NGvJWLeqJsgSiO99qyYSkeMOU3KAUMgiPg\n+anKYFUIWmsKLO0OksoDpZijoB5STAeJnqk+jR4q+ALVMxKvoNsbYGqb5JvT\nPgXyq0wVGeJSkmgJLpA9l/kPnqLgMrXImCDWcKBtjTiUh2apnXF8NrqZzuIT\nISBh\r\n=8ouX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJKjPQxrhPRnSfhcdH+UllZEk4xHbMcfHQQ8a4NcWqXAiEAicmHhu2/m6qVRC9qVpcXW9CFddjmG5CGQLtJFN7Y4OA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112082232.0_1639053947002_0.6260950377971259"},"_hasShrinkwrap":false},"1.2111242025.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2111242025.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2111242025.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-wfGduFTWbBPYRFQjEOgEU3FMej+IOv53mVnScUcseIVtNsgAsISjlskYTocnICTYw5FbwLrzospQAPJ2sDMucA==","shasum":"4848d6f018763dbd46421a53086afe5364f5405c","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2111242025.1.tgz","fileCount":29,"unpackedSize":2892348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsps6CRA9TVsSAnZWagAAUyEP/RzUSEwxigEcsTL8K6uB\ngHx2fRc8/2a1ye0gJPxLRnPGd8xcJ5AqEBaQgC6/hLbQS/WSdgTgBOb82AwS\nCewv6P3Y9oyIlBM186cJNwQjr7XgCckhVvTsZNShc0WVXASrhllSA0nhrn10\nqVJaC7W55nL+E2Rkkbjly9C78Mh7LVNv65BtI/PzXI1uyFvFa6PPKWYsqekS\n6+pOovf2iMcFn7LlfFH0O8gAgIV/NIjGbVFmM8cCmmH+v27XjGxhh/KDYkk9\nYngFDTZayleBNF65OT0tu93FrAsAtMc7bbh3MIOukX0sPQJq3Vg6y+DE/J61\nXgq4D40uEgra3HLWexjaY1Ex34HzQurQsJB/GX1XI18ef5CWfKZ462LjHaia\nnP943+2ATTF0ApXNSX3jt0Xh5nqa9utZ8Z2FRXA64k1h1KR8jbo/S4Gi2zLz\n3+M9rAeVJg9Laj5CI3XBhhvuE8P5M4SWOMSx4hr3gW/wg4G58wQDKfcmtf0K\nQ2l8D627kwX+5NN7VhGHrWMWQn1rQA4m9Vnrw7lUnKVeJxbPD0wrU68DEcK7\nl5ayal4Y11vQ3kKqchVVNg7onBfS7Pm60L4YIZpH6kPRPVBuV5DC1QdH6Amn\n6hs+l4DOOnbgaSlL3u+2rBiCb5CNMyujb79BwVJiw2nweE3PyyZ0z7qUDzAh\nVNpD\r\n=LwxI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwFiSQIl25DTv1JmPhI6316BwArsNZQzEpMhMqObVp5AiEAvZNeacmlX1N7Kw101kK68CMPdr/z2+pFio33E1p6Q3k="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2111242025.1_1639095098642_0.6786656897475289"},"_hasShrinkwrap":false},"1.2112091956.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112091956.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112091956.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-zZgpbBrmNFefBkasH/QwKvA1kAzWGi32iOhxc9I/12gcfXQergfp2ejofCOelc8PcjonlaxBOAOMtGEU7uK4SQ==","shasum":"55f5774f8593d061d93192a93a32737382083457","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112091956.0.tgz","fileCount":29,"unpackedSize":2892348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs0w5CRA9TVsSAnZWagAAoGsP/2pQz7K7eJJdHPs5ekB4\nTgX67VB7WYT5vNp18kATWqfcgH4Q6QMOpmkgUWfNRh3QNEDACAYTyXUKHyoc\nvwwxs4fHamUNW8bKEr/gQtJvAvQJuUw7Ml8/O9KcfNy/mHi5qdacN5J6pJbo\ncg5NdNNLBksW7CFCPxUkn/qK3AyIPTXt5xqaISUup6ugXqk/h8azhR04EbvW\n/h7W0NjpaNwwgMokitSnQ38EdlW4s3WE6gOJJ7tG3euAONQzBRethCAkCTNL\nGWVWtoY+ve8XVxmahEafoa1mnFi5CJJdPPCvd+mT/f0i5slMt2nuIJKFybXU\nnS6ASypDGThKHbzPZr4Xatv3kN/2GHy0MPOTwXoSKiA/sEuy7yWUjzhmQXoc\niXVYC8a7vj6zFAV2SJzS/BmgMgaZXp5D72bC3D/Whzh8OlS/UUYNmVN5VtAq\ntWHA28QH+K1SWrRREl9yVoKFk34fQ/b6sBR8leKqEUA4xKYZ6hM4dvlEuehg\nSeljVhSvYoXdlS12i0JdHU1vY3lHKTB3fmJ88ib+LFRLFsd0qvvsOZR0/M7u\nru/Pvz+kZzQEvFQlrqefdDGy8RSV4jJejI1JqMgCGg8inxsm9BGw7xyxiOtK\nDpNzHFLMS8rwh7jEXOPJHky7AkW+4tKLaoMZFo+HOB+jQ+UcG3t3AZ2S8Jix\nbKdb\r\n=HvZP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfEsuuSPwx3iCFxmVVruKUbK8gS2iJf9hPiK3sf574CQIgG35J+RzxOW2ou2K5xUnyYvfwf5kugjH4th1rV2A5d6s="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112091956.0_1639140409487_0.12066418715823413"},"_hasShrinkwrap":false},"1.2112102136.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112102136.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"07236921f8e25ede71217e1921f8aac93c30ab6b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112102136.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-GitBynFw0cVoVhAv8e5kDhbnbAHfu4hCBMv2pBtZt42PzZWm8VV5G8lKxaicpzWEEQ5JnPMzHrw6CDGYSrT0Mw==","shasum":"7f17fe24548f0969d704de4fc67a74a467b47fb7","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112102136.0.tgz","fileCount":29,"unpackedSize":2902943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtJpLCRA9TVsSAnZWagAA4fIP/ieoodJq0DwmwYQEZ8cG\nHdB0wBR5jQWTMYilVO7qcUKeg0gmfN23n8IEbZBCHo5nmkzPRsUZpXEqjE/M\nQc1CDTregEEtWhkHK5ecXT4Hh2ptbR9a7Jtrxoy4LYDFxT7OyWkaqIT5ANiC\nfPE1TiH7yaZHIJ3vWaZdXnJHw2LjYWMq5ciuAJ7YEx4zBmRdipwmhipuMJM5\nDEwLmaz7KRECyxgzR8xhvSt2k3c/ZgAeauNrhKj+ewZ69SvxtCP/4LZS8XE6\n12OBanXLNL4EANLlLl70KbOzIHsLHl0dRGVv6JrDa0UjSurx26uu0wUvs5aV\niU8xsPV+S5xWlmacI4t62D6IHrHYRZ3C60h7MmvEw0PivNtKFnoyc/3KJHq0\nLQS+c6aPPoyXoqMBARMqTe0P2NcApUQxTcMt4Aq8sJ98jpqdFjOyS1Fl6pQl\n2Kf8P/oOQ2dYXtkmlH/RrP4GAuXuH6w7UZ4Gx5zKOfpnY2M/HQZkuYPVyVP4\ncio9Kn9ocaSxv/2GvJ2oRejpCKSSQxrQSQcAMYcbZyazP/83q2HoXdjxjLFB\nAkydHKNVWx9c4sKQNuy08JXmgThCvSvhk7GzYovruq8iDWfnPzzW3+GjRvUC\nyUsOsM1OGU3M5uI0+oKOccnMbi/+fCIusAHtugf5zVoEZZkkpFv1hPTo6H2X\nSux+\r\n=eNZY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3qH2aaX6Y0MkaaOOcgxtcX4pUiYqxGBf8AdvEQ2viGwIhAIIYL1NFSOJ7PKbYG9b2CNquJsdaGq9AlQj4sru+d+Pf"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112102136.0_1639225930731_0.559394067133097"},"_hasShrinkwrap":false},"1.2112132331.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112132331.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"cf62ae1d6a12b70dfb6a7bd8ce66ed5bc6e30d1b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112132331.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-82m7QUZPumQYFyAvAnItrJ/9nCqRFGEVsIw5inZCchfijwpf4niMWdcKEOoKmosdy78G+HaLCTLADCuFPANi6w==","shasum":"2648048c63f06ff721349be6acd7ae75c0cb6532","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112132331.0.tgz","fileCount":29,"unpackedSize":2900760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJUvCRA9TVsSAnZWagAACC8QAJBenmo2RrPPA0Hra/fM\n9GJdiwIVjdoBE03NjyoquzebO1EQhTGYCgLv10mSP/nnErCZ8FEzMSNSzb46\nPivLpvxnYxuerq5AHsxnpzbBtpMCyyhuiI7QzY7F4C4VWKHVRtvzytsDk5lA\nyLNco0xR3EK4mkRlwQXW8w2orjNt88a8fl6174+xnZb1LyW0EsrS6Ms1JnWW\n0EiyZ8DJ3c6lbUFSgHp/Ovwb+mQg7lV+d3YAgQYgRqNLjX9y+Y3ObnZWx8jl\n7WLWZPe45T7PHugn5UQg7UCkffwsOtEd0gm50Og+HzG9cDPe6PwpnQJD1NVE\nEEdfAJJzlvKXImAiPMu6uK6bRJ4vaozxNgFFywRr9orc2lwqsiuPdwd7rHA/\n/p4fkfEpil4nfiM1ObcWQ5FsaVbDUtNlsVrbr3Zi5Qljyo8A3mlZle8qeL6Q\n+XPZgqCcTcC2CLWYt2zC1Y+6TLFIHzdCko642Qn61R8Veo2RdC8wVu2Upo3n\n/j6Kf3FjQ/wHVr4Jun1t0Eg83vXegDX8M1nGDlh1gHXZ1lXJON/LOEFB+7pZ\n9r8vc/ODs6GLUKMldwqDFQrDcac0UlVBPBbDMj3aPKtP2202vmax8AJgpc2X\nQA9ORgmkUN29QJc6sLXUlkLV4scoObfFi1Askrq+M+BrnueHOB0lfyVkPhCX\nyhaV\r\n=TJFJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3Qshsa7W2hkyniupoxJqeXUGuJN+OBxPhDqfhzVsxKAiAME+6qCX5BsSUE3razgbECBM2N11MWgEn802LdqpFXhQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112132331.0_1639486767007_0.4644013647550429"},"_hasShrinkwrap":false},"1.2112160003.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112160003.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"2bfd164830b15f49d7d86cf73821410a039d9039","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112160003.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-qBMyk702n6wSQC+1prMDqyq6FeXR3qiPRDGSZE87jOiYcaJXV4sA5Mh9Tv6erXZN6SGRRflg60H/XpzWUoc5nw==","shasum":"f5ac816f2e9f299e0f3857a7b9e035e36a07693a","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112160003.0.tgz","fileCount":29,"unpackedSize":2901024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuy7vCRA9TVsSAnZWagAA40sP/jGq9jjFyRXKKhzosTra\ndsCjFIAYPCsmDzAm7Pf031qClVcaSRMBwHAtYLHfyA74R7EUMZPYinzr1p5G\niHpd+m0NXLj+gzaFEXxaWqmnWqTXc7miKKFex53XFWikRA6fyU0TZf7B6YHh\nilFe4LY2vDjOWteaoP5QcCYEWu6rAsgohhVy/Q30gXRn6pAvnwA5aOhevaHC\nVfnkW4+RKIe7GD+qPdHoLDuntXLc+ghYLlUMGphb+QylLgNG26wI4iJCbQOR\neUTWPdNkPlsIUrVlskOl29DuiPp93eIt/Czs2Mj4c0/ZeJkeVD171U729EGb\nemCVtrY5mdAdxSTGDXZLhRobryGsmKqubMtGO7ph6mXAjYM1G8TnlkZSWnjc\nU9l36czPU/FZPTuWe6ZuFVdyYO6AkZngwj/bjLNBu8usKscKqmfEwAuVavCk\nn8/ocVpv7gn3jbRzeJY0iESDQO81FubcwMrddLgMTIhjPaPEObi/UBOeiXjZ\nN3o1LG4jAfRGYtTrRRVEA5mpWYoT6rW5nXJ9MuXjDRSH1ip/MOiF065zbzlG\nIjYVFaLQgi7GvzqJC+AzJ0arq0HS/+nnyFtVEkNbSQO4/fvW/XW3hpPPdP7U\nWG/gMKorbL3btVlabmqwYHLSRccUUnekSeDfOOcReqJ6nD/wHsOSP2zw4Y77\nmsm6\r\n=C4wh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2pEwryHfTOXNUUYfrP+DIVN9qQuMd9jo47Sm+LSU0iAiEAhiqJ1axAKwROoE19lYJ1t9ixVA9mlFLkepKqb4QmUt4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112160003.0_1639657198588_0.3216965398467486"},"_hasShrinkwrap":false},"1.2112162055.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112162055.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"e3242ec094a87348831cbdd342f5187068444994","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112162055.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-MWbFYLY4540Mu1NwqaIQU0O2REA4S/+oPUYxG8qbW05wOG0AP58jnvGjSiNI0vcsWQciIhERN0GRTHlj+P6QLA==","shasum":"48bdb0a57222e686bd2b3742bf0ec7aa07cfcb1a","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112162055.0.tgz","fileCount":29,"unpackedSize":2900928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvIAGCRA9TVsSAnZWagAAorEQAIeUnkhU7g+crRNQhJCL\nKz10Rl6MTJz+7smokAF5joudf7jShqBZ9xJ+Zw4YWdNT2vE7ffe6xx8TRTq5\nReTGzxEl/eunbMsdghhwu03TifNyqE6g/ZyP0A0I1QnVv/NuYAnBLutV+vAt\nKHZ48vgVvaxm2KnYeIHD2lOJSj5P7rjaQukwkyJoNkmVcDIYUJ9DaUhpYTls\nRXWIi2pZ7Xz97sjB5kisRwD8YsMENzxoKnMP7wMGUr/wyBX2XCmb10lmExe8\nyYyhCAgCu76q8EStdz5T6IOQlsg9iyI4046vEAABnPEGVSCWxiBcosfX9ZUb\n89eMQMmntHqyJbSjg7cB/TWie5nsYtB/HCauWLXdeBaufW3BuIsfZ8wstxD3\nR9J/KefRpw9LEsfxdQ7tH9clUwqshV5WB7op4nkYHBmpSSjEdPHOsc8qsMmk\nNY3q/9PUti6CWV9ps0ezgqjeXHZEHmIgThAL42cZE1M8GKzm05Z6qO7RR8vK\nCWtiHahUMHXzGnKxOkBFT32Ag05Qbe/7EWc/l432jqr6w4df37DNlVsb7aAe\nXmkkPV9Odfk1mjAMH44ol5qGm5+uO3IvupP+GC9D0nj2X24z0/BQLORvCXUu\n6u4UB+5VMNLf7fhmDChdYP7RpBM59Mh4pLVV9vOZIR/M7gq52C58ZMZ816jX\n2tIQ\r\n=i1N7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvUb024jzzmFP6XX9QV9NryG9B/djZCFpVw/Ap/tniMAiEA/1ZXgNJk0UCabtMvIb26Xf0foz9tkz2OfQ8/ejtgKaY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112162055.0_1639743494693_0.6544240109056236"},"_hasShrinkwrap":false},"1.2112170012.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112170012.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"38e50237c04e29792bd0ccfdc13308940a873817","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112170012.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-u7vXZQ0If9M7CFm36snW5Yi+q+2yXeQolrksZTceINFazZ31TXOdDA+34O0sRLYlCyPcai2j80XxLJGirjk4sw==","shasum":"07f236ef06f4de20378ff9154b096153074f19fc","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112170012.0.tgz","fileCount":29,"unpackedSize":2900928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvdFrCRA9TVsSAnZWagAA6zgP/3MhpZrBmr0Pfi212eL9\n0yUTO7+diGiekA/VE8xdRV7BLocobJQMJIM1Un9wqtJiwRRc5d+uYugeRFCK\nuQjn+J9rgXwXv2dsWDwgrTopVYjWlWqw/HcZav2iFQYkT0DcnIYtTmiESjIQ\nvyZOE5VgSoIsM/TtZdM44q3I6r/fYz9uHDoNYOOICJd+8WOdgNYGumDDYn0j\nrRp2wkArTumHZ9TJC7uoUNYTbGIua04dcvX3ywLvp3WHOfjeEBA862bKQGg1\nqsr+b1p3dOK+e8+0DnzWwt1ozGnjNn2MbM33G3sau7hMKoeST9AuGZR1nSjy\nF9UVf242l2Xxkh/GPeq9htsXRPq4YogOZCyNzZ8BK8Pf+wf1gl8aA2GrgiVc\nIC9H1Hmbt/CD3ZOK2rNy72MGQOwMe9Yyv2Q1brNnuqRuE/8kx/arYqjOQyiZ\nfSeUVU0m4Z8XaA8udgrQcxoE0n3Ei85ZUbzFMIi1q5VLQcwplwE09eg6pNwy\nU7yBA/cwXgv6wHfjmaAaVhKEc+IyTiHT+bKZvm0Ysbk7d8d7cvxe+q0cNTe/\nlotSnHqVK2xsW0AukrJWNguj8JOapweyY0PkTQRksNbP9L1vB2wMsZbU4rPH\nxRuIP8y9POox8YcGI+9EiEIx9r/v9HFbLnOvdjryTouaTaafVFVXRsDC3o95\n/egE\r\n=Gmc6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3VcNCfov3p3XpOh7yUkKg70e+HWISqoMhrnQfeejUJwIhAM0ExQEfsU1AKkH914gnIhi/2Ty37f9WC28ASNq49q+G"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112170012.0_1639829867175_0.40660661068490644"},"_hasShrinkwrap":false},"1.2112201724.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112201724.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"a8be9d1eaab4dcebc8c170c9911acf0c8a5e73c1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112201724.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-VC3G3nSLgjfH+PhSAtzLPyAMTipth7qouPDlY0vU1RDB65siUe0HKbKqtpUED1YUtsE+vCEmFKlqFPkwISAmmQ==","shasum":"0ddb38f92169bfad1a347e06ec2bcb09bc351bde","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112201724.0.tgz","fileCount":29,"unpackedSize":2900928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwcbICRA9TVsSAnZWagAAYvgP/0dzXKakf0rz5N53nv50\nU1C/S39uE2q8uXKefM11BtwT2wEkE5KzZhY0wOYKsjBRnb0otUD05NyYULoG\nJBYz1tGap5HCUfD+IJZ6gZAX2P3f4DVjEGHQQrQx4m6JXCvjimT02wxNOJtC\nrbrJGKSmL7WBQDpOguoZAxKZ2DnzUlNq1UDU7AJtadf71pStmgBvKpexg/PI\nLwwjx8VYyi1uPlwHQGxzk1XkP8luJuzrohnq/mcRYUIkEuf0nsGcEyhwOxkd\n2Xw/okdM1pQ8NZvElnZXBhmcmQEOUTbnK/MmF+Q4/MfHa+ZPRzDX1bFY+nPB\nGdk6k5MjOdlyhpLb1XHxtBgEljQnFUZWCOnFSZi3+h0/tcBc4wzU4PBhe0pa\nD21zgkODbBynipU/SFSdV1m+5bOE2LTgU/b9i5aDyu2clhA4VWb8QA2uV+5q\nmIZ60g1TGU2xJrKGiQQlAWiElLf7KDaXVvdusnPxvrG5XAuGvRY/hcb4HEcT\nuHnWBB/ctWUWT4DRRFtTc0vScYQ64Zr4Zi3piVWdGd7i2cUfeP2LM5PHyTbD\n3wppQdX2AsX/7ekXhwL9xkZKmK/cuCeh3rNSAxGO9SVN7Oc1fffCIQuxbbus\ns33ThLtuKcoU/OUR7wRhvh24eaodCSk37EDO5Wf1bdKC2uqhjbAg8dryRXFb\n4eTV\r\n=kSZo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOGwht2/BalQKGIMwP9arLNQNuah5O5B+1Od8ZU1mUEAiEA5Bdlc9RSNKSr+/L0c3mEOgTgnmYH9wpFrzc6hTQoVW8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112201724.0_1640089288139_0.10595629811088636"},"_hasShrinkwrap":false},"1.2112212349.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112212349.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"a6b6a6c259283b2cfcfb474966602c2ada072484","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112212349.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-bd6tah6MT8UG7bdS9TFuwbgJB8+A4sQjTk0LRXqV9zhEG1NxT8PMIdGjy/GAtEArXnDuqaJqTQreXAZ8sGJjJg==","shasum":"82b0157b690d060459fb33715c490b27beb36b47","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112212349.0.tgz","fileCount":29,"unpackedSize":2900928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxjcCRA9TVsSAnZWagAAPXEP/0SoHNTEzyRrx6jjeO89\nYnXKhOu0EmGO4/dGAnndbQpFef14qSfxnnYWVgxjlBl2tStsE3WetSQCKXWA\nrfmQAVwDNuwRpNcJHYqgBJqOaVg77nI8Tuhq0oqjJUvbeF7Tl4OnEyO9rdtp\nLOXi4/NNIA2D8n/99SS77IsFG74b1urbAJXdgrb8XK536LB3xHfFfGw6//+T\n61AC8s0EPhLfmTs2VlpuDlQ/2PUBu99PkCuIvjAmI8xyv9RBo9FIO9RThvl4\nfp/2sFJ25MhS9qGNO0UJ4qqD2gqsoZ9BtHIDlU9sk9lq8ytidWedwqDESARG\nPxAghxEJ6TvkoerPErxPAvA6tqaC3L2enmC933TcUX2GKk0981Y+5Lx1wX0r\n8/bwkJGJDpLJYN1E/0FCQivnuwLU+FVmzmK+AeWD2G7FU2YZVTiEclV52U+G\nFWNbFysrHAIIi6CFWfOkzU2Xtj6EliQI1XyBOpCp//lKGPdb1tcxhO5B8IO/\nufy8hFQ8bXrs4GoexbXhna+rwRaJKMvrrixoQxEiBUyWI+E6lgTyXFyv6PEF\n8PxCYgRVBkQB7Y5ru5lzlww+cUM4wIQeIpUHHYNp/aOswQeq7EvUOdvNj/He\nrXn77oAGKVMjnl2wmpiM342vuPPY5HGnBjKdojBWInXMhF+oiQTid/3nVMok\n4iR4\r\n=6L6s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuE6Iaa7JDsUBHwmiC8OytGECR/Na0sLeNk6X9IFv8UwIgfp6BHuTdouquTuvctWz/6Nfd6McHl/ZnqY15+mWEmR8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112212349.0_1640175836440_0.644351434617459"},"_hasShrinkwrap":false},"1.2112221739.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112221739.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"5d282652a97695e5ec57a655f76c0cb6d40de066","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112221739.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-4H5UKSZPAng8yhCGZOgAPm3d1AnuMDiTcOwTNWiVxCTN2Xd/+stUvIw9FdCRioySnixVHPfa/tJtRofbp4F2cg==","shasum":"406788408691dea4e6389233e64755ec4879202b","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112221739.0.tgz","fileCount":29,"unpackedSize":2900928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxGkrCRA9TVsSAnZWagAAQm0P/jNdrrxGP4ScHEXkV3uY\n81zTE8j4hTJHAkZvQOtVSeQ2oZVPCamnHfucSKZeo0LoUCRsWUK+Y+bd+omC\nBq48Mjq8AyMLnr9VSt3OLPeMGqCeng1Ef28R8uJMZVbfybjBkDArT1DXDyZz\nJDr7k+/Wj6LP+SuNNJ/ZL0PxOsGp4jazlpOPN6lCr6I57nIH0EA7RX8pSiDJ\nFX/6/wnt5sjhZyqBnJsmDFJYewvEwjBWoaaq4BJ99/VuOm86H+j+uIoPd/AD\nAE6wL/Rnku4AF6BTr9I35nyb6sHIGxuecLYm1BsqswGji3ZYdHiGhwgs3Ho5\nrriVZMcFzqKNJMMvkxFD7G1Rg4Zse3f75rsVCe4XKaP3CCQrdDLLfYZIZO9+\nzCRCIIU7u+6Q/YAWA+5U8NllryG+UXR/8l2OpqkWyVHE1P1acV8ajH/jo5pF\npaHEu0XhQswUAE1bRhhsb8Ovpgd+R6UiKZzndeknWYZ0ZcHMq5LUNFmBwdv1\nW4M9mWa/M0HRlSTXGEvwje/q47I9a92GEMhR59qUuop346CDSKlAO/O94zZF\nQjy7DSO/hjvUnN1YitRyrWmNZsW7znxxOCt623/ZvdkgzAzQvgwtWGdIxyEp\nQRVoeJpejfQJ/Z5J2/ZiZ+DLoxjdKRdP/3SJNoB8wdVo/NdeZeQB5VUnkEdH\ntlaB\r\n=I1j2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErcqaywDoLEiHbShk99bTni99iN0S1DfaWAtDSVO1rjAiB1KdtSL3bLhz+UK6tSwrep99iPuXfmACRbn+RFvaHRAw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112221739.0_1640261931219_0.3693744418497411"},"_hasShrinkwrap":false},"1.2112231523.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2112231523.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"3d06e61b6949affa49fa2c89bd550777f0fc8c3a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112231523.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Z27P4DKjs5JAbJZTEJ/TG2hjikL8w5byW3wXLwZOvHVaWeUA7JhsmMhsNp+DrabePIRhQj5eGZmhrzAvQXH+qQ==","shasum":"6f669bc196de7bc97bbb7d0f008b56181b2e8981","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112231523.0.tgz","fileCount":29,"unpackedSize":2900928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxbsCCRA9TVsSAnZWagAA4hUP/iVqlna4Ry0q8RpP7Ha2\nLER2SCC57MlWB1VjMltkkr3NZYDHucARg9ynRj+ul/qEaeE8XWVNp3GeCJyA\nxUVSOf30SBiSLWD5f4xtIUUfTe4MJ+OSadmwV9CIMVU3abb1r2x2AB4EkmBh\n4GKO7uGA1DCyDNY0c/oqWq9y5KaIZ5CE/cirFWg2RUTbIqQSzw6vvogtTzgi\noAbzwpk6+boSpLr7TOvobk63mN51t1Vq4eXwPKlENniASTjeRSkPD7EgI6Ds\n/uFUOtypL6Qeivvh/E4upBmVT2qd0d9r+mXUpPIrV/s4y4x5aHdlVTnSnQ/Z\nHWukO7gUeOblUatvTCre4sYzUGIdOcLMTegnq8TtZC4UgOX0brmswKy3+GQq\nDjTQLkYDDRQNzXmQJGwnxRVzSb+N37afUPyd85TMytXL3Csy/0W2OlG/b8ph\nGizAFXTt9VBl49KGa47qHuUXrshmVrYeoHM0WcyZiEKd+rSRCo37Ikx3chtg\n1jtlxr4T+evPkcw4yEZVNNSfO1hmicfUxpcq9objow43UCvqZDkYuBbbuq2n\nS4YxNS/FnQbFdNRczMNi39BGBtNSfDf+8AabNn2mrWOhWY80eYHw8ufhxqMF\nz21hy97IO6ic7AiDT99ybbAJtvpdPtH3uymMq6N69YxN9BhEMwLz59Ab1Tw6\nPn6k\r\n=VkbC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCx6G3XF8hLZvAnGgSyqB8DvLOvVmPxzVWT6o1w/mIngAIhALrwQ2jvHOiEAQ+3HoQ1vY/pCwkTRCT7/HH8XI28eIXO"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112231523.0_1640348418499_0.9779801806044521"},"_hasShrinkwrap":false},"1.2201042109.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2201042109.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"9526fe41f7489e55b2e2a8bf52d6b0e4367e19e8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201042109.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-VZvz9C99scFAd8nTX8THpIr2tPI7cPD9Fi54xGEaKB/WfBHLPJY0fzsyixI0BvYhWnwKJtv/yw+YJor6ouVQiw==","shasum":"1e7d9b2192c79254f77164499abf797c76bbef64","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201042109.0.tgz","fileCount":29,"unpackedSize":2875967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Y+jCRA9TVsSAnZWagAA1m0P/jmh9fkyhU/5LDYjiueg\nE4yLl5KCr0ZCu+uqGteEBSCFyhgaxIEejnrwQMjcvotB0Bj4N6TlWp2QroKE\n2AXquH4rncf1fyZAx2LQ78tgPOeY7jXcNZJrSfVu+IhC9zTytdRO0h0C/Xc+\nbvklbQitFUP7gdXjYpV6fW8rXSJw8XUa+LhFYbZ7E4lgcYiruwxb/xgJg07G\nXpLZRrYSq3k5SGn60ezx0wTHkL1kGF84kLQ8dz4PgwB6kPuwNphT+KAKwpLT\nXwZiE9e1RGSJ0WtwDBiADzj8DDbu3LvjbEkr37aDbECqjtFQiL4JBwvP2fkf\nblVzQlmYIV+LL5Ibr0hHK0Uv92xCvT8cY/GdJudIyci6ijYqWMCyIDoaO7vS\nLke94lbUShs5taEnzTsdMEz73xugZL2x/EDQjBdRUxR/8BUTLzsKeeYaiKpq\nu2d2fm+UpIrO2YAgvSxK67fYmFs/2tLrfmBbNsphlh2lDqbn5eRmh5XsOIpJ\nvuySx1s0iTelf5rqhJ4SjZLKck7dPbyjVq/V0NpW2lhpiSXz+mZNSXHesxlu\nD1DAg0rLeDqQqfYwWKeblzEphHDldOqbrdwd+EKLVR3wvbJRe8UZSj0aueU6\n5BLK5fMZ6z//tQdbReif6ErFV8x3AqT2yUOf1Kp99S6cf6ShGUP00833pad8\nWzbc\r\n=Rs/B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZowp4Lqv7nI2JtEN1nsCErkWOFkuUNnwVyMIhc8s1pwIgWd4MMYvey6+yB2PtqCRDAmnQBsVu6VYpda6GJzzLc2I="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201042109.0_1641385891476_0.5720076160242149"},"_hasShrinkwrap":false},"1.2201052144.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2201052144.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"09cb7c2c04a007089967ccf35accd80cfaff0c83","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201052144.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ieswYV0kri8WmyOj56d4rG5+xGRQ2KaS/zIuXhUoVXVZG2NW5ifmY8zZeaRUJTR7SPnnaGq5aEAlT/Fubmp3pg==","shasum":"e20e347535418440122e084d66740686d03ac5cf","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201052144.0.tgz","fileCount":29,"unpackedSize":2875967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1uN+CRA9TVsSAnZWagAAbXUQAJ2WBNCdHzLZ3kpn7Uj5\nZWp9cu00ooiu+NA5+Ewuq9hv7cAvL9AAzWQLq4vXLHAIt0nqPAiiRjTRSJ7d\nIz4Oka4f/bEnoMN6yodU2556Nw/pVNpt0GcVWCp+Tk4OO2YuJKjLd4NTusDK\nWCI85fXQNBgDbbIgyc/ur19fk7J3xUpBjLkDNoyJFY90GxiW2wDlh1vPXHoP\ngmG8KQPY0Hw6PbVcPfy0jPRb49EdIeA6ufZWkHgxE9moF1Yi69phEEgfHA25\nJBobRM9vZbPHPg2kaOZ40ohTtDfvL15vvg78nAL/KB4zT/Hw8Ix8EK/YigJp\n3HgmnmVZ5HhMlJkHQ9Hog3TfCuaSRnkbcQTbqG55JrgVRvbLZ3N1tzA/+f0x\nF2nmy88fqqTcSnkcERT/VYCYxOtmx6SqJrM+SC37a49MRRUiF76SjkBzmD+T\nGe+P+RZw+fWhnWjrMcZGuq1NImS3JKZo1Yd6RRE1alys3ZPkIqScvkWUO8+t\nBAT4gJ6eq6coDp1qE4NQKy+FkebLbcWK2/qmQHx8FHGgJLeCCHM5dKW539zF\nZjtyNYbJVOZrw0Cbcf0H698LHjaPrRgs0D/ZWZdPA7i3JhFHIQ8RV+4pMAaD\nKixhB9+ISsEHVHEKXDKj3tzYdc8FB2wE9Y475ue/Yu1JDXSRNDuZ5F4g8SZX\nR2J8\r\n=/xN4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZb8nzMzQiqLCSU5cOvZjEKMUiVuNIGyxrwMYJrPwd6wIhANKQkQ9VvPAo5uNNtXPPPTjJ+izspQ63jAeenmb6jGYs"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201052144.0_1641472894599_0.4089289383522814"},"_hasShrinkwrap":false},"1.2201061922.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2201061922.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"737b882748278c09f4270720744c1618e36be6ba","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201061922.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-QBV24650gypkTBkcAZ7Ifz3wY8lXLe8e6ceOcilHWwlBySxA3sSJet0Q97YJv06yrBuNWVRFiRpIfgz1VAckkA==","shasum":"1228127677a6c51b54dbeb788f54b6921345dee2","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201061922.0.tgz","fileCount":29,"unpackedSize":1611762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DLVCRA9TVsSAnZWagAAiPUP/2ZXNjb78+Tls+uXLxvp\nTqyhNA56Ry0hopkHo7SbGuX5ZhohbxV21fdYqHuLt4LDdv2VOipWUGvaYnxE\nGheZhMcHAripc1QgsWlHMD2VQINKBN7X/UcbZSy2xcxOFu0R2Z4BPZWR9peF\nHwGWLHNuB6palhLRnGIG05WFBqpCDHusz+3cRTT0pG7sDbTxjz4SlHSmbvDa\n5A5Km4bMFbCt/OzozNrlMBuacCS8oaAoJxmUOs1vm03+TcIjsFnxxDjL2y0p\n4xwrgTgroN8YngZhUGWvXSkuFMoNVJ6pC1EztytstAYSC3gycawbcVktAFbE\n80IZitisSqxNftpVx1XxXuJx2zf9UuNGtDaogDhz+/a+JUc4A6dzKlyU+AQG\nHPkxm0DD1Iq1MOEuz1jOczhNngVYwnMEzSpJFqsUDNI4M88qfd8hfH6sYg9v\nw7tF7aYHtW70LhoKGckegV7iZLERyxcNLO8tWRfJo9vXUdCc+VRFVhr1F0K+\nHSfrVwk3YcOQ/hvGgIiXTkhhZ1bNkDGPBLkKuyoba5xjtQbWSGKxoylOGjzm\nvWCtcBdjR5DF5/17Di4YISirLJN97n79CitD+PXxANUam2PQ/QNdRS20AXhc\nK1XGMiFaL5e19u25q4vNeHSQsBLKNsBKCQSrzYm4B3wu8TZfa709WiYPuPda\nnJSN\r\n=LaUF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAhQ/XAAjS3waG9Famh2isrvdtDunvBFroyBPI8vG50gIhANEOmkKtJMfJy0lw6Bl3ZVTGVS7X0/Vk108Srd2WlRG+"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201061922.0_1641558741694_0.41439244201174796"},"_hasShrinkwrap":false},"1.2201071715.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2201071715.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"e40a24fdddceb1c635f67571d9cf513c7e58800e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201071715.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ncneKhOWIL6liF9rVmFaEiK6NPw4xYDMteTbHYxePuzPUPX0r6XUlJ5iksI/m3D86LaLDBOS63whHd/Su2VIZA==","shasum":"0542e7c1b923aa51977c1225cc1a734d4c154f46","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201071715.0.tgz","fileCount":29,"unpackedSize":1611762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2YH7CRA9TVsSAnZWagAA23kP/ArQX0iqFc1LeSfqN+zG\nw3BpwYQXdSOeaeeBSopGsEZEzTXyzq5Rxy7Z/sAsKCRGX6ekcGocojAsl3lV\neRHE3JoWzl7qMgibM7BZxxHs/KOAib1+6tw/1RLPAdB5HUUQ0RQOq14qdeWX\nqMk3dsMUFEN7K57Jk0OP7Jw2weTy/+ijHtbg4nbt26hpL0LRu8rqpJ8dsMlB\n5AFDjzCgp8swGBHrVgylpFfsMTmL7vY47ZbaP/zIHcxXtRRtfXlrHNnec4Kj\nXbONCv39rdTZWHC/UrpuOsKoSowzhIjVN94ozxXuJoaTC0beQm5LV27vaoZS\nZzMxB2W4pwA3Ph9vNbb/48p7RoJ1AxzdY58G7WITZJFTGjYOnyOBM9YWFtdP\numsjfjFteToWk2C4mpHXQjxpmQqhT2ujUm98/Dj7u5wMIFHXY1TFVFZzFSdq\nuLgnLSfekFSG72Znzaj7cEuuLT7l/MTm77DkU+CooZ9a3l6ldIMi91LYuws9\ncUhdTQFDc64ia+XYmCQ8ZVhvGkOlLKWUNnU2wK4Es4J9ijfz2aEodc7nk1D2\n+JOYDeU++UAjSHOKowNLdHTpNfPHtsfaPn0vnYJ3m85R1ZcZzXu++aIsi9nn\nP7uaG4uRU0bde7WdGI7/D9yg8kOyFcTSBSkSUWZ6+peO57BJZiBAbeTk6ND8\nIyUB\r\n=Opds\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFD1gxY1h8NnqCW1cf+ISBEpYgRWm/SVACe4Cjvq8qpAiAI8JEkIBHN9+XXG9sHVBOy1XhdEn1QyIkhOx0O1nNMTA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201071715.0_1641644539500_0.5066145768448631"},"_hasShrinkwrap":false},"1.2201101902.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2201101902.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"f0b7ffe685c60b51cfbab92bada4e0c87e0377a1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201101902.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-lavQ6uvUqkJfU6mEgeNCcBJhjfXbQ6IUyVbDUSZgx7r5TBlC8I45gdCzsvHnUaZXgxEbkTJynohQpFp1J9NdCw==","shasum":"135e569817d15ed5325d8602fab648c1056ab7b0","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201101902.0.tgz","fileCount":29,"unpackedSize":1611762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3XhMCRA9TVsSAnZWagAAWpUP/3L33rr9m9NrcHWSXQqO\nOMCDY2osLzdPOryePTaek8KzQRB/i+oe7lzqWiQPTpvXCux+qowbZZe3JJlt\nZX6eD4Wzp11IWjJHgT6Dz3L8WayA/uuDggRRk4zxHYuNOSw4bjqpr6sKJGi2\nYQ/fvzr30d6JFbhq+HJxuwzyCjjmN2P1rh7waDG23IWAxTvC1xWKB1Ay/Ykh\nybImmsrmYmOWrSsJA1pzmatdZa1QbKlzGryCSWFcXAV/o6whQm07rGZRO33N\nipW3uTpU3dwtB8RJl2EzzUhE2mouhKsbKn6z3OPK/Wt5gg7xCBSwbgP/oduc\n7XUUEmxpyyEcYhmNjD6wzE02y9Hw0BGgmxJX+m4wpZCnfBYIx/yke19EdjYa\nTQ/TR0JalwXl6GMTPpkMhmQR+wkbu5f0aQ/eUjtBHPftFOMz6thwC1d0R8Bk\n2YPoQtxrnlOReAGsox9cLkf8LpuCmWryKQ1noq0zp0I7boc6GaUcTcdsbWgn\nmePPDS/+/Llz7Oxyb2ljPj6Gr6LuWn52Rmj3wQVxpViDSux6zLBAk8yno/U1\nI5ydAdY5w770j2hsmrIdcqrvah/ly7py31Awg0ZsY9UB6xzOiUSFpkl5Vdsk\n7TuEZIVlC+QNDcl8O784GJc4n5VQCgXETTXL5FVVfz2ffYHtlcPpKzk+L8Fl\niUOC\r\n=XrTh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICiNsEDV5eLbrKoQY8gnmzLihRQEzfbmtInVyvuwz/h7AiAR5+ANJr6DYagjtMfIvMhO44VLAJcPpJ2CbfVPCaEUEQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201101902.0_1641904204667_0.6638717503292964"},"_hasShrinkwrap":false},"1.2112231523.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2112231523.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1ba2e6854831868cfbd5aecf8a74b09bb0fbc2ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112231523.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7LmqTZ60KGw3DrwZrVwE4BcCXvg6PzbhByRQm1nh1MIEvyGxAzLUiNALobbkjkr4mpTkSE/gNXtuuC7IbHIwtg==","shasum":"8964ebfca6ca4533e7df9e1bcafd6ec9c94cb2f9","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112231523.1.tgz","fileCount":29,"unpackedSize":1611762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3dmgCRA9TVsSAnZWagAAwB8P/iHiEvghv4eOoXRCZyAK\n+JG58TD4XEsOh8kSTd7EzJTLiro9bYCs5IIItKL97uuZeRieU/GKo6ddxKYt\nap4DKz0pJORF4Gkh4FdWmcuXG9vp7wspX1jICYCmxzHyI+yMbySVN6TJMgkt\nSw+UnZcWqFbjzzxaaRAZ4eKJFHDK4U9F61u4CbDrjs9iGsPOJdw54KM0mh+H\nDoByEoVFTY1Mb0Gedr13EOOPxgIsQcsSRfHbABaxZoU0p24iwGDRjUHVxdA4\nGNdm6h+r+PLTvSSXRH+p1nzxS+awJDRvelmAc6Cy4n9C/okr8czQckdNo5NX\nDD94aRf6ZxBYXHr9GHRznF5lJbfkX+RlSSgg3YMudJ7uGL+zuaUASnSr4Wup\nfSKt9ZwdrEn4zLdBBmyPc2MTkpahO3lYmVKrX4axoZSlKPl2ckV2AbzMX5tf\nyNTdbMD2APM5tVfEnxmkOv7dCg2rs1YjYnVtsPKJNGeH0mQ6Co5XMIqoxS4C\nRD8ZYx7mqTXJMM/fnKx70acE6C1ZPepv/Ks4rFLhcZwFt0isEtJT7xeVUX5b\nITwvgLSbKzSV5cSX6uqoNxD6l2OEsH6FtBeeRsYS4H9buzx9qze5/0p2QOJM\nTYbxJYDgvrSln7NkKcEPxO9yAmeNMoYbU7KwtHG4yRyktpD7P/1mkya3Kc0P\nSzpj\r\n=NQUW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlShA+KsgpsxdNuuGmXZYfMjlPBCrLtXeKvumCpnQd8AiAcOYFjD5alHQzf5INNkejU+KNxsbyNdCiXeoGKzZvkrQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112231523.1_1641929120698_0.42829983164695773"},"_hasShrinkwrap":false},"1.2201120015.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2201120015.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"c592aa0f3999a8b6109a8a31a07cae6a83115d8e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201120015.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-jvUFdrptVqoN64//KzqLLS6i7xu/H1PCRv8Pj4AAgcUkY3UeV1AoC48H9PW7zsKpe3mBA674OCY1MKAVQt7VJg==","shasum":"dfa2a66a0395cf6b0026712ca7933cabeb5c27d9","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201120015.0.tgz","fileCount":29,"unpackedSize":1594972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3soGCRA9TVsSAnZWagAAYzkP/jNVYxMyo4LJGHNdV8GJ\nmLddbQLs2mOKJ9WsMoEKbMJcSFFCopgN6+o52csn3dg9BE6eqVbGdtvZL7+5\n9begCbfGYpX8Qk5xqI4iaD9kD2qQgDX0/x0VsiB10aCKnzKfH00XNRSIaMiR\nH/7eOGEAnp1o6XE9mUXo64iapXECBMW5jxhoPPd6mKOLrJXQ1qI4cizEzWI1\nAEug+YAXouhnKZhbDy+6amQXd3ObrMiGhem9lO4+uKUMbZIOm7TCKHYBmwn+\n74XL/ulOmqkpPqmP853RH6dNlrYilUDTnNwslVQGuPJ6wRJXlzLEvyelH9h9\n5lBOPjZz9Y9HfRdI6yIrP+jSGdiBfwCUP9Mwz83q/WZMEX7uC+GInJ3qCFF1\nabnWJMM0/+rt+H2p26A1W2UHHciH1QfzXc/JQI3ieL3tEgRclAktvIkGMB2l\nsUhc75hP7Eo7Q+6eFjjWugXyPMBnkXQxGZCCCB0nBZTLVVGt7VsjlF5BHIWK\nt4IWqnaY+uqNzVNF3pPOdifYkIX8fQElCvwajGOCgWmILPi6q/sKDdV6K8BN\neFrfEr7WTMAcXBiy1wXFtsq+FpQcW9J3xkMfPMHz6myIIYO77J4W8AbbkpLE\nkPtPNHFsAxioMbF/5aA9/Lsq3XlYFe+a2j+TVsnCD68vmE4iwXtYSNKwlMVL\nrbC6\r\n=9506\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqAB9Ln9kdXP/zAZzdNo7CR1yvoKkOvUAjxV+jGHAIGAiAIUMhTTz0qj5U19rdWvNXtkvq5M4C6YFC2euXDyDq1vQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201120015.0_1641990662099_0.7717136514075889"},"_hasShrinkwrap":false},"1.2112231523.2":{"name":"@bentoproject/lightbox-gallery","version":"1.2112231523.2","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"036fd40f8ecb160f2d6c65688c6ff4765a670bf8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2112231523.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-XsrqLrC9rvg3aTyiAOBOoYajMFmqWCYABl6lWE2L8Nntc8JlqZi24cgpEcgWddnErEednUj8jLOhLtoTV6xPLw==","shasum":"812e29d72d7f1aff4d0e735172cf518fa5932ddc","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2112231523.2.tgz","fileCount":29,"unpackedSize":1582607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh31iPCRA9TVsSAnZWagAAMiAQAKOMJ0f+obKIsYp2gRWt\n/exnBYfVueWeBOeUG45aCcSIesEFrHJ1/NvItuF5kdms1UtqbmqUDfPJ4280\naHwdAsnCMyEUugnO3RijDXsQPWTntkwGHNUsba+IValcX7mBlZNeFl6h16OZ\n5e4yi0P3WdsgD8BxV8/LykHH+2Z+doUqn3CoTt98i20tm3vt6eEEqSmWKgpi\nRASE6eEAhqpBvantfbdPxZpfQTe4YbYP7pHSJbv2FaG/KXLFSA+tN/3M07Rk\njFu5lPPMtUZSlmGbtcEkYEfBGUsHk2dm+q1HGi4naP9OvEuiTesXJZ/S13+F\nAkegZU0Jlu3YyEtm3e1EdXBIKwSttmQG/uruoAoTWUmxyaDjrvQ63ZYHX/Tq\n8QEzdAJIDHfVTKxRCryDuR1pHULIf5DrLgFoynC7bDfKZKgDP4GDJg/flTD7\nEvlrcwT81r03bELQ6IoReN7TG2klzS03H3WxlFBi8MX/uRTKQRgcTPVz9uOB\n+VAYhwLWDMotoMGrk54l9oZ/w5GB8tXNgE4Nj6kqdZODoJVNsw7ezJSubsUh\nF+yzajqKyGjmf0rXsky/8W1kkD6BT4JENUDVgueSiWcZAynvjgqUQAVM5awu\nlXLC5yH+B6uU9A/KqQMBY0Y9dK9W43hgFQhfNNEmfgFZvy+oO0m3ZMxWeoem\n+Eh/\r\n=sWwQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2ZzyjMJnLorTCSgaBnWpjkNTsZag5c9Z3UjFzfIfQGAiEA9NpqbGFt4+0JQY8XKIG3jGvXLvn3lQaLeq7CL3vNlbc="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2112231523.2_1642027151389_0.15087175451093726"},"_hasShrinkwrap":false},"1.2201122239.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2201122239.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"c04895bc1c2e1d0b7b874427b9bf1cec2b4b9f72","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201122239.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-w8dfF8ifNRqLeqMvenANwAhnvWsFnbDGm7BcuaAY2Cuth7KMcD5Kd6peUbWSH7qmNvkJ69z+5/eMjpO+Ip+U/g==","shasum":"37440914b9a92dbe9928847c47fa90e4bbc2c585","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201122239.0.tgz","fileCount":29,"unpackedSize":1582607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CJDCRA9TVsSAnZWagAAtx4P/0a+MTZ7YYm9JJqLcprn\nt1m5hrYxpVtd/Jzjrtvacierv60jdGE8pwk16BqiaP1xCjy0TGDWgRGUrlwx\nuJo5jZTZv/xnomxsk8CA+CSTyHpmwyVGUDqLBdlV6x7MYPufeWxenYmnV3Zb\npr+n8uzhK+pJVALr09/J8r3sE2RxuVRgjit3Ux+iwGn4C0ptpiONuFOAixZF\n4WpMHz/I5Bww/0/Tq+qpXcLFz2zUX4EXb+qikkdDkemkfySRaCTihr5GvDP9\nWQqynsM9zg2Ms/Sxa4coijmgnyIhVS3aFcxS1/9ota9/9zvRn9xYzYjjvk2B\nGgRGKq/qZXIT3KV1yTrDlco7hDFSirx3tzZQXm5nDK8ZdLkNkSG/k4zG/axl\nklrj5J2LU17vMUoBrDGXys2+pKjFaV8BAL8mk36MVoYV9bBCCYPYDD73PUnH\nTZVYEbRks3B1XJK+12MMk79L7wsqcQag0Wn7YrV4hq9jvLcBQx7C0HDeu7AG\ntB755JmcMYv8zRqqsF/i97KrTMOy4TpbGVDbXFgnLPUsiRiy9WxZCw7b00V1\nuduXNrj7bv4gbtRVDxAAnQlUWwmjCYwTk5HgTfkVONZaneCKjSaed/BoW2VA\ntnFgeN8iLxJr2xVcQ9a+dTehiZJWoC8Z+x5xbxnT84jkuHZufRqlr0A9c4p7\n+Ydw\r\n=al7k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCij4V7UUXxRWYepLpQGQ6ocTVGYcswMWI/4gsVb4xzQQIhANB+8mcy/ES21OT0OHlLRZR0+Dcl2Yslvr7LPPoNJmV/"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201122239.0_1642078786859_0.23254421998036134"},"_hasShrinkwrap":false},"1.2201131702.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2201131702.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"e9b16ad7a5cee398ceaabf6ba7990488624e098b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201131702.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-4h2uNIgkDUXsrJpEPD1hKBMtJPcJpeDka5B9keujxDYaoLIaEw7RA/HhTjlwmerVQOc20PH0vQXunqqlTBU1sA==","shasum":"acf8899707c0a7fbab9157a527a509a73b0d9944","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201131702.0.tgz","fileCount":29,"unpackedSize":1585481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4XTHCRA9TVsSAnZWagAAuqsP/0T7ncOxa8q70q5Apyhn\ni46bd/4GA5RCQI26s3jzuj4TXyB2z5RbZ6umgg/Vr/Q9Xvew5y6CSZzGZmgK\n0yRLUSJ3NmSLjstTRPqZKc0VUnCfcquWrl/3hb83h+FJ2xF8v/WcA2KYTPs7\nz1NJA7LzqWYj9BDufNSnFH35aJVjh3Q07nisYprp2QeiUrpr8W1wNLGKWSoo\nLzvtIn7heVWxKgBEVantLhr8TFeQk/P/dja8kGhmdoFx2rpWLVk8PCmXvwnD\nI+QOA2RZ/5fMVtDYtjdvb4dSECM/avBlQMmuadUrRWi536wNewxDcCwolFmV\n+7NQARfp2dhR4jjVGjAI6qpo5VkznRfyn0OP6+iz+plrTnA/sv/mHu4dKG+H\nX8hNISNkvASFkCIdzzZddnjaAbTq+dvHGLrZJFMLYG0KSAvikyL6+QcElMlh\nGpuIhbPXahME94OJjktoVOMFHdxUv6HzgDb0oNhUd/2uf8VjApbTjDRVDmZ8\n3qV9xiWAUvc4PgoQzp8nZaLGCYYpu7EB+qznnY2VeA/kLFv1rYeysyYTbEYY\nHfsLopqu5S04EhCnA8K1SHMmUPcUHzQkGWIf0fGHMhFIrCzU5uBXXU05/AwH\n03S9394pX4mlM1OzxgfL1RuePRNr/ZBguF+JCFOtQibaQIhHL7QaEXWcl55z\nZVly\r\n=4HEU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwdUfV8QdoRITO6KKZ0gqU2tJvzyetYGlNMVp4izxceAiEAluX5UIrrQ380SnUozvzmAtCJTwgGAxuWVMZcVciEDBs="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201131702.0_1642165447603_0.20945315998942848"},"_hasShrinkwrap":false},"1.2201141909.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2201141909.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"96bebbc98d1f79b185c5ff6c58442ddc2092547d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201141909.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-MWtd/WuG1gd0RDhp+g7RRAI3gehRQEjembCak0SKljcPld50YnieJrXPlftVEzrsF99UMyjgnYI0GVuGjCdh7A==","shasum":"daa76a50a010016b6533906f2908e7cbe02cc532","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201141909.0.tgz","fileCount":29,"unpackedSize":1584819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4rxRCRA9TVsSAnZWagAAd3MP/1dQYIDkFwpE+b+4uP2c\nWH761CJRg4ZWl3sPycW/KTr7qetbSLxbqhC+yd8d0/pdDX+i00yYLJaEhSjw\nFNjJj+oOgmHuAeNin1EwY9DDR0wLHFa4y0XBa84BN8XCitt3u7NtrRokgVgm\n/j2jEuVIogUG9U58GDY6STJoK1bZxPfz1vc7uqAtj5MsqTADM4ZxBdPQ5gkL\n8NfdBTfXo9dqInAgLBiPy88YpYjRLigQbcMqLO1mWSf14iJi/BmYQiE5oUv7\n4WeqCWDLPqXbayCmmYvGM68Y4HgMhb2J4b2j+pk6uhpAF9TGXTLDBTVKFvr3\nUWk/er7L8kB1zkWWB4csb2M15mFmdlkBfQxencmk01jNihrIXwSC/MLWKS0M\nkdz4hpbnRcqPPFNARZETI3QHA/WdxfUN20dp1bTumfuB6YRG03OpZp2I+tGK\nYYYluNpYfVVzza8FuLqVYpeZ0KCebLHOMIGaoQm+QConPDWkexNDSmVDvXXR\n/FADTCcnnajIt1/P/52vd4+1IJA1H3H4RW+YDBPYt/sTC5e/IqzepNu0Abgv\n1HZh/Tojo3uCCY3ef3BjnsePlGY4+4EyC0Y8colGUViONRIblws/vMRRoDMc\n7ipQU5a30sKPlpQY24FxCGwVHrepEhSUQfEllHYdRE+gV4bpjKEEIxRLCa8n\nVqQ4\r\n=yuG9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuDc8yGWJZ0e+UfoW+wvyGTLSDzTbX/H6mhfOQLL6r5gIhAKx+e0BVA7o1KPOB1byDr/Tbn9ZwVjcnYvULDQMM85D+"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201141909.0_1642249296773_0.058523275233327565"},"_hasShrinkwrap":false},"1.2201141909.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2201141909.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6474ad58b0a7e1997cf1472b09ba21af402b09fd","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201141909.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Jov2iI0QpV7WoTzNhqUk1SWPnfG9/Fjro4sUPVWytv6wldmrVock4QBd3CIbho62WRB5K/QdBwTcTmUrETwhPg==","shasum":"cb5741a2a4fabee41ebdfefc69400ad00df9f617","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201141909.1.tgz","fileCount":29,"unpackedSize":1574275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8FRMCRA9TVsSAnZWagAArxMP/A2HXwpCrWWFV8rBOzNl\nZ/0zUKquXCAVJRMPcA8D4sd+4UKh5lB3Y1MzXb6l7TghXZ02nAO8sVeRPbMk\nzJmZ53Aj2R6aDDG+HVfnC227vbPzE4awqF+rF4nks6dCGz5HVzQgFmVcWRib\nCVyGtnXEnL2DK2CTkkwhuZa0iPGcg2ZLjYJJIN1khSm5rG6sHJQpiRBdTTIl\n33B/LQ1kfqwZ1exY6RN/WC1tPhWzbkro49l1a8x+60V/ufLHITqUbDfDE3j7\nsKlkeCE12C1Y3l2sRsm1mwcfJ/5AdwR0RABiDOGaGBXsW7sGJwiukFOIZC0J\n0g7UROM8Zeb4SfcJQHYouTUgoBsiGEuI0FASeq1/P/KGnqOzcnNJnSPoAaT6\n9nhxWWlYYB5wuApi/nk/vGHneLat0cawbm44an7uobcmqjM5oJ/xQyGLoo6y\nfrHpA1dBKuBBJBkP02+osvLnUmIeMECMjYcXZ8UYw65IUfPpd7cxoXFfzFrC\n0GYghMO4j+D4WGVWb+wCmHZOfh+DOgt0NM1MoA2VLK2BIcABHx1l0wcNXevF\n3hJCOu1UIeKN9yWc8d+QvGEEoObG6J3uFfgk1tCHcqEQuzlHlwxgj65aMIO2\nDnbZlDvyEcByQwGijCCbPmabzggDos48CroTnsb3uuoIZzvrCFZQBxcGlhxp\n1kjf\r\n=nA+4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQVIA3yjeNv2nKqpyIAe8wXyZQH29nVgZNyoE4qPFtSgIhAKaro4+vMYhlS+/AGIDD/IPckyoEGa1W6XFKtW3GdV6L"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201141909.1_1643140171890_0.4036817426175736"},"_hasShrinkwrap":false},"1.2201141909.3":{"name":"@bentoproject/lightbox-gallery","version":"1.2201141909.3","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1edf4ae1e7a533868a19fad5b3b4da9917432bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201141909.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-nVz9VKtBBKgGvSNV2tiv9gPA1U1mykARMbk2luK2bfSh/4MaZsWj2UEoi1cFRg7hXYCStKsvlFft9vyUVdHkgw==","shasum":"284ba0b11b2b237e71ef5cb4113c9ce309049a53","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201141909.3.tgz","fileCount":29,"unpackedSize":1576486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bYTCRA9TVsSAnZWagAA5ScP/1kt9v6m+cEdOYmGTH4C\nZsRRXGr6SoQGZ/229PwnBnQSPP39MyUWj/wSHBuyqPJL9as0IqdOu+1uo1Mm\nUpehfJggnD6n1I7NZXmhb+pVMvy2NUoDeGcm/VMkKCMXhGbW+E51rrt7k3nX\ns2YiWQyauGRZ+DtaNrNwVo/pFAsjvU5PrTQ2EAo+e7XSlLPNapIJLh6W/9p9\nWO1JBiIzWDKYKJGUySOQ5S0AOeBi1dB29onV97pvqOQDDExfHs9y+37ePE7w\n0NiFejPPTCqoUOPAUt2glXFiWus/5ZGFwNO48b+nVJWWcceE3WOkJh+v3DHY\npFBDaKvRBrQlIDPoQmRSwgI6s/AAEqXg2j52WVvcrBpp+jiWHBDdE30JEBOs\nebtXvt1s3754VBcvGOt8jtR5UpV3cOnF3pkJ8N/T5I4TSkt2BliKjeRW1txi\nP8NU2VHxDj8gxl219QDRbkmSicm4Vpzo+d5qNj6LtAnytbH+/Zo8rxwL5SlM\nhTGDxsRIEyaFIndVnEYxtNcZtROzGn0ykIjnoo60RH8DBOgu40u7NSWHL4EA\nVdduQNy4LnfzXdXE/Cqse8xbYi+Gx2Hl9P3zXB2wJBgb7KUi8yqtskW9ymRs\nB3HmqxyAfYzmLc0h8ErPXzhd946C7XPpcvDLX+XEXTJheZOjd/NhdHQ/5Ntj\nIlu3\r\n=eYij\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxLOy+0mYFXTexrX+qETlcXVqsksAfMh9EM5prwFMh+wIgfOgBXIz1ZG1onumyEVmB8JjltGQ+5IEFwf7wFzwnxzo="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201141909.3_1643230739751_0.0938300333283868"},"_hasShrinkwrap":false},"1.2201141909.4":{"name":"@bentoproject/lightbox-gallery","version":"1.2201141909.4","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6e60d79b180fd0983c9644d325b45bd569c6da2d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201141909.4","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-LivWAoKd7W9aYGkh1kMML3QwXQfbqOOZwegH09s1qC58MIlPAV2jSdZU1DJ10m9ZGS2muL0Qq2pm4oivZ9qh0w==","shasum":"e8b28a57c0257e231342cc028dc5c2237714df2b","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201141909.4.tgz","fileCount":29,"unpackedSize":1577184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+ahGCRA9TVsSAnZWagAA0SoP/jmK8bqZLCrEBay24Ccd\nas8/JtREKn/BScoC0GBb3yaiwckTvAaxP00I909GBmuaQSAHtxTCF9LquC4F\nuS7fokEZ7xVPaCJGxDVb4f6vcvSpmGKxpA1/Yk/5e0ivBExkLpmTQS0SDd3e\nocz2qkt/85jt26TaenKCu3m15THf6Fz8mxfh8PPrzV3XLN4UadEuFsIq2v1W\nSJyEFmhrkZmM81PVUx6wOcldBG8Ni+vGhrOFteqM2eFjgd7H4+5OK61VbOls\n3/wPBk2LpOD2dzT0WU6wB6Bt5OfcMmr8lNom6KSI7HoCz5bHt5iBoVG6WXnv\nPZ3j/m6Yfwsqgd4tgqBUkg3bBIvX6bW82WOrP1E0q9vJ+GIUy8TtSVrONLXt\n71E0popCEcP1TEE8WNi0bXX5YO9OIk9uz1x72z9TkuxO1qU6obMAliEnEHS1\nGrOPhtMQjdHOkzfiBWD/dba3bwwyHX1oVUfFB/ch0RWjngEAeTplFGlsIFes\nJu5PsK8/1db8HMzFUvsyPj+IBgSPPk37zjergyNS2VxMXPsqCbrYZFcJj7OC\ntVTx+8GR23mcfIZT5P3peN1Wp2rVaA2z7GXO1DuCOGX6xqor8G266BEZBClD\nIz80h63PzsJwQTgHhCK1frA/qIUigL8/oOf8ws0Sk+RZuhAk0rAkDGPfYjkB\n3r/C\r\n=PAfC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTxgvdwlvI1T5T7CbUoi096IiLQrjftYcsDXudkvFnoAiEAw2xGpjsSYtT3BEmH3QltX/wiXlCfyDe79C1qoP/vF4Q="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201141909.4_1643751493819_0.7730116023904785"},"_hasShrinkwrap":false},"1.2201212122.3":{"name":"@bentoproject/lightbox-gallery","version":"1.2201212122.3","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"ca1c7d4b4b4a72f4913d7c304b5368187458574a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201212122.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-nl+69zy9tt1Xj2ATWKt6d/G3EykY+bunWbB1CkCCz92LrRoyv0JG6siIZa7FWuFVtOwQOhVn8oI0HGeddzTB+w==","shasum":"812b8b327366af1efeadcc39076855e4b6af0fad","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201212122.3.tgz","fileCount":29,"unpackedSize":1577184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+sZNCRA9TVsSAnZWagAALAYQAIJJIegxOq8bffjjVu72\naCClZxgYrpj3CRt5rop5byJX/2uD7d0rkH22ISrAHv+w1wXKT6Wwy0uNmYh5\nJCbHr2FS6uZVRG0LIAOKq2beYnuvKXkrGI1qwjVax8ULAAIjwtVOpstA2oQp\n+Oux/bsSkCWEyqvC5rMdNEL4ZAk/+Y+MxSwkpKn3ESBMkMoT+szNWg3250r0\n4iijNLAbnJDBsvoloCye9miGCkBFrznxibtFHZyLc+Lov1+5E0P7tPeOomuD\nf0bIxX6sRwoiOo1rwhE0glgruzABwbDj7mxlMouwQUZ1dD50djIF0n4i4NKe\nk4tOOdSh56qagPHfgFED7TVzgZTEGufPpPpLYi6ZGO/olDvHgk2BkKHsrB89\nxWM9j3RfyyCcrzm5EZXxYfOVannW0FTBx1QNlofJiKN+AbxhWG0aNkZejfHp\nBGbnzuWsAQVKmYlsy3siIpyZxe/lpqaE8/czWTnzTPMUIlbUsyto3uqOaX3d\nB60PwkF6tpobcOfNSGqkN9zTPIOoFYziLQsGkhXzVKTW3EykP2yZZfwrCWai\n9UdQGTIXhxc4JYCmM+iNBGWYLvZpkV2uPNP04PEvOfCJUDZhfDbt05/MNGbG\nD3Y0Evpt3q7GXtsABljrtOGOh3mWNv44jekkA3uN3W6p3okIyC7qmAnq/ZuB\nbG8r\r\n=qa9R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuaHSIEXmXRq3C6f36OcPJ/Ice8VcXgNMQGLkUpAdlfwIhALBxiNx73OPjUihF8X/qqEHVnGI1tUH9VjalPmHvhLlq"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201212122.3_1643824716990_0.4710608008206474"},"_hasShrinkwrap":false},"1.2202012258.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202012258.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"fb0c4a54446b5abfcc53d1d446f24370c05507c2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202012258.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ThaHVc1P/FAbCG4Dfi0KgKAfsxYtbS+b1mnzYxjpFt85lOby1ef573gKhuWAoWHJVjCSCFWd5pqj608E8SHViw==","shasum":"bd4bef3aef9d0c6517575c7971e270ac4a2cb232","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202012258.0.tgz","fileCount":29,"unpackedSize":1577184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+tfDCRA9TVsSAnZWagAAKuAP/j7DgyG+IfiDlfr+BtDk\n3ABgqhay5xMJAzUaQ1tiEysUQWmrz+nGbbbWrV/yur7LbmXKiF7uyZdWNNyG\n9YRA4HqPTcyzPwPJv8BHbotKjoo/XXNf6ryGQdSZYqRPmAq6X1deMtBs7N0g\nlH/yerBgcvvZcCAGIYTs130C2BHmiUXbAYGW1sYjY3wVrflRawGU9ICfsqYR\nWBTgn2mku+OH8g6WivBqqErpJlDvv1as/KDv8bMyTSdHxlFBMacOE6Q8dMBK\nCGg/0wjWGCowWOgZfT/3sZifh3XGpY4S1KEPKj0wvC3SiaVl1tDqRu5Yk1Dv\nn21dsmRecaulD8T63BB4ATUl3rbdcWUH8ejRSSoh7xesQWjKsMS9Yb41CPev\nBEAWzgi5ykAQ3Wa4y+lQkkiCZw2F8Uk2rOjsyvb12M4UvbN77WpkCIzEv/Yb\nKXywNhg+q3qUHDfb/8rdTaGKO+qLzPU+t3Hw53dy+jj5Hpv9WbVRe/kk+jRr\nRozUmxDsMzFVtuY91VT2Q9ZOLRKF86M3WXWEdsUJeIb8eylDPyvlp+GbbkqZ\nTvWlS17vPV9d8lYsZd2nlQYhAkgFt/CJWsbZJLpy3cI6fNupfDQ0kyrplnXw\nrpikb5ptCpa25xAJnKwWcxNug3oe0KINHc9pTn5tcPp4VRL94bF9TAwqEOGy\n8Iy3\r\n=ZBkt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGroxKdHdzSCH/YDa6DmhDLP/fM4BpEyyIYO378/glXYAiAA1gA/9owG/7Fpsz0PClP7ctUbLoaUuHkQVsEFzHLzYQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202012258.0_1643829187513_0.5404176889897605"},"_hasShrinkwrap":false},"1.2202022130.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202022130.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"76b8fbdfc923fb90c4ecf4dededfbae0a5978ff5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202022130.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-8D0YKBcUJHKzWZFA3Xknmrg7sG8iq9uD2iVxoiI29rbG4904Xxi6rc9txJb8Uqxv3EeIovqCuJt+QhYBwO8MPw==","shasum":"542dd67ad149c244a244a49620c07e4ee9d08d57","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202022130.0.tgz","fileCount":29,"unpackedSize":1577184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/AoECRA9TVsSAnZWagAAH84QAJ0kSYNgD9oT4t9LPcCN\n7P31e2pNF92Zze/VV8OQZeaKWYopX91j2uMcD1TwocNFce53Zhh3M/vSE22g\nupqx+vXXxTQPebYviUkFbZ1yxeYGdFOFZAGt2w8o/TgYc2nVuK8QPZMKMH/c\nbh5wuLXQZfIT3u+3+r7KQ/uYWZ640FhG65oH5ufrVcf4QTd5pdlsn4BVF8gS\nF9uoHuilim10ampnneHtZGfG5Ta+WZTQnlvgngEVFLRAACRdZr3+XRoZW8WL\nAn1rU0dEeVtkiblYrRUph9PqH1zmYvllh5tJvnJC01ufBNfhACgybFlA6pan\ngft6gCMP9Apd8Z4hBEtC8FJyOme5AONG86q5WNq3IjyNXAvklUNSD4p5JXhJ\nnFlBto7h2wI+rda3osiP6fHN4AwMHnBl9UUCy7N5ZyUz3oHsrmgkt2PjXJ5D\nqLwFcrXjNsGfhzHS/GTDmmAdMvt7ZNmwdFz9gjg5pCm5UVuoNo1frSeBhzEE\nYAVnspeu/sylWzz7Dl2b1Bm59ZgMA/zC5U05gTijizjaQyzXFfOwq1uQVkel\nYmTXmJ/32Fd4PJP1Qurf6WZ7WE4MN3l9y+aTkjgWt1KcuHQHoFv4c7G3dVlW\nZJST7zctezJJ0udsQN6aHblRYUIqb4ctBO8EJj70eFwNSwtFdFeoL83pIVDK\nwsC6\r\n=rMmV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBvOkR1Z5iheXHP+0LixJCrp0i+drbQdrQkJxJnrBBRAiAtv3kuB9tmZpKj2bcyY5/AFGGZCyykNWyyZnNwnjzqKg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202022130.0_1643907588264_0.5129947631459635"},"_hasShrinkwrap":false},"1.2202031816.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202031816.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"b29dbd478c93a5298a18f8df14e6c1f5184879e3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202031816.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-8rJcYATa0LDwsy9IXQI6Qicttt1rYGZnfHS2PfUS7cAscmuIWptUOoNi2xugYDZ/4qVNYqvsINAjtZFH/c5n6Q==","shasum":"7d5840e334ef5baed2343457679aaee03f03782b","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202031816.0.tgz","fileCount":29,"unpackedSize":1577184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/UpsCRA9TVsSAnZWagAA0VcP/3peY/GFE0BDV9CFCIY6\nAPr0W4iUl3cWs3ho40aFiuEcbREFtPntw8cbjw/SdIE74uJabf/st0KH25aI\nZbj/Ns9O9Ql/VFHg2zQz7idoeiejwYoNAzYtQISKVImTwUnWEHVrQ0EpU7h7\nKTMbbOcXdPDho0dvQFRCjO2osZyEzNHKqfgriNSvuzaMi50qJAwLcy62V7n0\n5YSRmIsRL92NkIkOXm+Gr7hNCmylrfPxrWpd4mzJY0g65Fwzis3P09ugRu9S\n54R2pzVsJIoJBfYsUcIv1k4XaM2eo06jdPIdTRPpwoJxjn8+HELLU5YX5k27\n9Nf+fE6YvpqRMC3P8C9NTCXl7VEhNNF/phneYraxLfnsodie/BgbBAThGXwR\nH80vgvrpA6GVs+oxy99Aq31MgSR8HyHaAFHkNeGGccHBuxqx5cix09IwDIBy\ni0/wQk0xLdlWcMDYLvd92v8ithwYOxnMDnQfRM1NXAdWnVRihvxH63LC6H0H\nFZYpAo6fvrzWc2u5KcRjfUJywMMGHqofG+aH0+QYEvqqVi3OYGJzdv5t6/ET\ngZ5a9NRc0DfLAZW75oC4qyyOJjUQgV1yotI3c4SMQ7IBUYAm3fuUv3LUO0qA\nzHfHB/e2uzTC6RShya/YgVmofF5tvPEXpNNQZ+zLuEUJaavTBDkMzi2wZXtZ\nLc6o\r\n=x0J4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDc+K7C20X4ZsBE6+8wniXcpW1mqHFWdWlcI0d+14C6RAIgDbHcfu7jSICnXk/nZF/ksRw7MuooU8XNHOe9xBVF7pY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202031816.0_1643989612776_0.7190502367611882"},"_hasShrinkwrap":false},"1.2202042210.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202042210.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"04d031e10759f2ab3f4a10cacd2b776e3de93812","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202042210.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-bR4+HRcwxir3sY8TN8k3F9U7JsT7EpnXBhGbXIyXVBTyF15tGIc/9FyNwGD2CziQjZs9iRemhl0QV4vw8eBO5g==","shasum":"18b174b15d4b39fe992ee5f717319e9ec6370b15","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202042210.0.tgz","fileCount":29,"unpackedSize":1578435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/kDyCRA9TVsSAnZWagAAvA8P/3CruxIuyYzOWTOOufnU\n7SiUpyHNkcmZvhKirH9ChqRCrgELSXs0jPJ/A7iE7NOsIpnSalEsda4lqOAZ\noYEjTBJzLfG9g0YprspJjhnpBaP2U3sbXTZGrT7QYXx0Tl9yjOb3efDNq2N9\nm8u2DfcpTsrsnvTgOOBE5w6ojblPoojzJ6+GJYfLOGx6cuJweCY45CADvlcV\n3HeQAY28IVeNJOxNQdtHs5Vx9YTIpJ8xwGAIEFx6IOcOrBg6rWb8vwKalzD1\nw5CP6Uax89ebGpou3wgv+/Lt0pGjNkxBttBlQJPAaXEN8EMcU7lJenCQhK6q\niy8HnSX6x/e59GeZMilpxvtSxmkqDmIvM3Mt8zTR22vSkVLuXhJSUCvSrF6Z\nJNG/KGai2LtyZ9Yl6BgZLbfsdxFgJ11ZBDzdq2FKBXZMwWjSC1yooQZbtFGQ\nr4AC6VOfZvRqSSfodDrDQYfhV+EVXMB1NGoBQhNcCAFVmuyBdHgjgGED1NEe\niucRh0VLehAgVmRsJ/vJHACMTPASsDWOXtxPilNpXqi90c+zZqjlJPxmVxpd\nzDlipFK/v0+ejA2tkHJUhRvyQyE7rqfRqNLspK+uk95vMC6Y1uJgxhA9O62m\nvdLS1yoclahvKmRwq8tLahyXJB1c7TOdBKSlqhIyiNI5vSqHUsOMwkvJOljD\n3xth\r\n=ZjpD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQPuI+8KMOK9IV5rds6tbD0Z/4PpZrvnJ7gluT9N4bwAiEA04YbiTkq5YHyVQgWYyl/iGCBTLt8pynYjqO2tsaAAWo="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202042210.0_1644052722432_0.7569807434464786"},"_hasShrinkwrap":false},"1.2202072236.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202072236.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"1d8443e81e44defe1ab915032668da75884187d8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202072236.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-IQC74LF57rVIeNdOX4WivTfEKqeRpSsVwV2N4f4Q/Vcr7BzlQvSAfOq4GzcE4mzw0oQIcdtM8VvwmHKzhI+OoA==","shasum":"5b2c189ff703dfad678c3908b50fd6256acb61c9","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202072236.0.tgz","fileCount":29,"unpackedSize":1578435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjXnCRA9TVsSAnZWagAA+/4P/0EOnJhKUn1AfeRHms+m\njKrBO/cI1bD+3zoxOgeEQLCTM1aGPp3vQXOrFNSzPiDJ1bVXhUAf59mWZYTA\nx9b/cvrpECunrSE246ctYJt0Edk9LAz0MgZDHmT7SaQBN7gyMxYWlsKt3dvV\nIYou6fJY8M5WoJaJnDTB6mLMbWx8H4RCGFaB+dBAqos485zxV7bn3cGRtBy+\nAr/uVsPi2nVvOaHvxv8V06cinlOc4n8ah3TU1h9UW+kFgDnV2/PiLX6PosPb\ntZw8Ct6qUwQb6bHn51zG/U0wyvbWHB7KZlFq8s3pRl4cBG/y/PiBibKv7RuT\ndde5NItJeqmgdIUdVBGXYdtxhOuNW90vRJyhh/qZPOxErsQfbKLlGuLsL5nn\njU9RUEmgLojPNA7f/jX0dbqssgBix5ajQtO6XS4K7rR2LKbxHwiqooQUtiWM\nbcVnJXPkD1Oz5h5SFgiiTuM/AkHrE1vrYrfJeXrM40AOBh5SOgrIWTFWTh6w\nmFKVaQUadVVDj4DN7kryDb49SGekE5hfczWX627u49XbGM3AhLN9XYg+tX6y\nk2+PM+duDxNAhCbEIX+p6ufg0eWTWvYLw2qCyIm8F4v4DNE4wfoWCGsORxig\nid/RoZwPHEptC0jIUxCrvB69LTEi5D7ara4kglG/AgSvHSgfa1P7PSxl3Cta\nqFVP\r\n=c+0l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrqVhMRegTeQNpy5TYvxxT+Qgwt61P7npqIdjCvTpnJQIgfl2+yxfvOIFRnb1qgBMLZYLb3j2hOOIgfpDP2U9ElJ4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202072236.0_1644312038962_0.6178287102495628"},"_hasShrinkwrap":false},"1.2201262038.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2201262038.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"cb2af7d382510037805d85242e3f21a88654a20b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2201262038.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-PbI+eSvvin6a2TZAJtnT2o4KqLrmFeCkjkLYh6aqe4Uq8pm07GdikGvfVSiC3oUoqZfjuJHETscpVJW6vWFbNw==","shasum":"10a3c13c43ce103bf090c9721dd3fed7cd4a95f5","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2201262038.1.tgz","fileCount":30,"unpackedSize":1585049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAtzrCRA9TVsSAnZWagAAjDUP/0VQ/tLa12pd1pemyLI6\nvEENT+0UjGhQGCLrAsas0QNoJuboLv3448YNfiZsa6Ro8gXWnp6DIGCrseNg\nDBxIk+HdcoD2MlpkV3WOKU/WJBovrlvFJ0QzjRyGb98U8lGvia2ZXzWX0fud\nwIMfkJ8lqe8ijhNDyYrEfFFK8oOZ30hOkzAGmS1cka6ul8ZSeIJXD26oFXwD\nP02OMjabN+Z56Vcc2ddtSMxVnqLWdc+vCo48hMKvSn28L3J7zPbfrooG/WBg\nt6h025/8DIuDtdngGm3wytVzXg6nlcG0z8ZOX8akIVAUw40SNniTrL2g/1Z/\noO3BtIzw9WUO8nV8mDckQ2MVYWubLRrf/c2evBCziUwS1H1SvW+JsunDOQ44\nDoWZJYGv7PV+zMHcChQ+A5/pCLcUXp4UCJdPKlXBWCifB2D9dpIo45YIfZB/\nmJ7Ej3tJ1AN3gJXfzQZK8e3HYTA7I6ozA9Ph84/tFTfrV0ERO+bK7Qrh9UsY\nDJl7SBejBZ1qLe6LMikvXzA8vFHHQVDWk8368HC8Uo/cNttWvO7T3DtfeTFG\n14/Phd//1AWVey4Z0aOqrAy1Gjnps/rpplnfERPtzaEDO2dFmWr+xVgp0uyB\nOzMcemc1whxvsH7ITGIXL6t8dZN7+unSMYma7AzjNlDwvSyLyJvS/rRB3LK/\nIE5N\r\n=e/bq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICyrAsPQX0vzkg0ncZc0Nj4BzeRpCRHygW/s9CK7EwjuAiEA6xy1SBmHifHDlPaHSzpgOFQlxP/x/QSADLZOIVt1uXM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2201262038.1_1644354794783_0.4641689966711333"},"_hasShrinkwrap":false},"1.2202082004.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202082004.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"572ca92abd38a7a42e381c556e12e2d929f26802","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202082004.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-9MZ+1LWd7HtHwo5qnXP6cw1CbLKKpcrXDTJaJNM06hb180JnYj1JLtGVqbZtD6vs/BVU1M+zasch8iH65UVbXg==","shasum":"fded3a032773d50699c2c153a5589a9b352536a4","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202082004.0.tgz","fileCount":30,"unpackedSize":1585049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBD1bCRA9TVsSAnZWagAAojgP/15LtbfmSp6nx2CZpdB1\nHSsoouPURI+nJSXenuglOLVDdYC6qPJE4SNv6J01QV4xjs3Oimk1ecjaicmA\n+c2j1gz5eBZTPE4zBN0E8WDvrAiysX4SEEYihm6Ys8R6YC/YTMICiMYMCyOs\ne5ssLBFRqKAbtMfkRFA2+K+XLigJ6gn/5ytbVlQo2W0/H1mcJxuX29Uim0aL\njFT2MG6EVhvzOWiNsgMtQKKt50LWGdu9YSNV2gMtm2Ja613BDrWgAdIbS4vK\nU9+CXXDoTRtuwJacygn0Ak/IQZeTf/a2QBB+4qVgQ4P+eDcAsoqRF0YHCiWd\nJqodDp6LVqh7Yn9MqG0d5AzWWvZluwlo+Lr5BNV4uLpGwZPT+Wl2WUn8Jit4\n6FqmdtP8mTHuCrcitFaXX/fP5K57x7CgLUG43mArI22oObT1Pe2tY+z8MghO\nCkbwaTI8XkCEFVAknbT2Vlijd6paRTVwh3MEFbne8PUSbV4bOtcDlAja6ezQ\nPzCc4V/aWUv0tiWjSjtupTSIGxcBZLYgpcXLkxu8MXvTxReXh9kbDhvBrx4V\nAgAhZoopiZctVfwViIQ8wdTAJpH05904heDbM+DO3EHMoPB1aUf2RuUUSooi\nZaOjcpAsBGEA7kRsi56PmNx9/50eL1mtHMZrn75pSK7dE76Tj3fAYUi75b4I\nJnvE\r\n=mTBi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNmGmWTfO88Q7yBTqqzMI9Iikp3iuWBoNAKVK5fIpW1AIhAIrvnMr6X9WskTLv5s306as2qGsHjDTazPt2K1CUAMou"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202082004.0_1644445019230_0.9897271210882053"},"_hasShrinkwrap":false},"1.2202092050.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202092050.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"37b830a030b935fcd922e108d5afe28be61d68c7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202092050.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-2qVcSsWZoZpT7cNDTSrLM8NEFKVsJtpIOA15kWdr81HJv6h30f2G955uDPrRtR0vjWMVITP1Nwx8zPe+Dq5LUg==","shasum":"def8cc098dcd1678aac22d32c4dec2d6d1c053b6","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202092050.0.tgz","fileCount":30,"unpackedSize":1585049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBVIGCRA9TVsSAnZWagAAQmwP/3ZVsYg8cHfdwpgfwlX8\nx7LgmuHKOXlzBTXexo40YweNesDpKi9OjtXVdravUkBFNPd4++w+wiuvJnMx\nsrd0Dn4jof0yf5pLkqdGQjmxMRu/pPJmwpsob/gAHWq3gTiJfRSlvr4kTO8s\nav5dcvDQOqN1ooz0D0U1Y0CjGPoKVCUXsihgGk0VGv9S0wUbp4mG6KA2t0oM\n6oJNH5TSwgAw+kmEfIpmcubu9PGnsQMdS/EDqUm9YrzW0MwqD0eJoHfOve2s\nxpoDwCYX6kogwGgSHqwlfst8FlGF3DOJufBzYaLyw583z9snWqHOGMYtOINS\nn5YjCUS0fuNH+Tmz9pT+nQ0O7GHvPip8WSPl59JH6t1JIDgMJstm/F1YZVnx\neo215mT7enXaVR8PuK7rZfOAEsVE4ifCUPCjPFgSD7BeIyUQRipke4jPlQte\nl8sFbYO1dNIQNfBheHN1TRg9dkmFwgdfjZNux5MZKTCf8vo56waP5AdYjTY7\nNVdZvyGcjzEOyn/vsilf6CFH3TvT8ZHlQhlcdWsqfRrrmHuGOvJqJYP1BKmQ\nTr4f7OhwHlP5jRmmQZuc2c+akDa2pdwkGFoPhto+lmk1BtFmR49YIiuEqx94\nppa7LouWdTPrKOrfU1DoG3z8wG5xLSjnVkWMgWplKbPFPXTCKvZ8Rg6k274b\nkxLu\r\n=7vab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnd0oymh9yA7MobvhctgdJuhdP3LI7Go8IKErIraSJDAiEA98vRBDACz8NHUa9ndHryPavBnVvt4Ce4+YLCRjiAFms="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202092050.0_1644515845979_0.9566036465728789"},"_hasShrinkwrap":false},"1.2202112230.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202112230.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"42cc51fbf53c86e33b0a12004dfe9c35b8f5d0fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202112230.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-2G8aFSoK4NSufdTMotLXp6ucYZEdAUu7urRBSDSK59uvuIS6xI13/D5GizsiIKuRCzy7SXHbdyTcG1vGF2RPJQ==","shasum":"4e22b9e156d227e962b49a7bb6785483816dbd1e","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202112230.0.tgz","fileCount":30,"unpackedSize":1580563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCsRDCRA9TVsSAnZWagAA3CQP/RzniNMiZeEe7EqXHqDc\nmZ5k1A1FAu8ttcHh3EXe+FAeZkYZNh9v23NuDABHQH5aaaugypvatNXz8zr+\n3ExYoeR8ZvJB34dpzf4vR3Pcew7+e+Sjd1gzFFxzyZi8Zs6Cyg54bdHAHS2F\n3PzWRDU2wACJNFEN3/DSZJ3Rf5rM+uRKSsQ2qxAdr4dYQ42lbNojd10qKY2j\nbPSPhp5XPTI2Y64sdG9lTFquyDINhzhbhhGxKfbN/qpNPUDV7yumf7WjV/+X\nBJgaPP7iCvoQGp/l7icd3y4rqYGlW+t98WhYd8bzheQh2/PBddXXiooHr3Ej\nl7P55nluIEXmjHV4ICJBYXRXb0k7sJLtDgXCHtUmQ4BJkmOQc7SKhqd0Gnee\nD4byfmUlsEQ4hWYqJcmRkZMpPl6PSSbrTrKR+DT55Mw2wHwY5qdxXgLGDDU9\nyBa52fpcEoOmx/hCaYVYRd7hrjfgirtjdlzJ60I3BIYIrvBwMEMhjmI+/bYh\nUOQDmRFQRd9M/TAgYTDg3ErgGwWoVvbkD0CmrVIzsR7vgjwA0lgPicWaVG4k\nL7HhkRffEYAMN4tRlqpT3bDZ2QUKVtRI3QKJKWbfXYhghsJ5WfwtCvQchoK4\nOA+0GRgrPcqYK+hd3lAE/58BQIF6nBw2BLvp7/0MwU0h2vhn6qALWOBDpSbd\nVrlU\r\n=33Qo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLVvu+FKV6sVLum0x7y/Tl72HHkYPn/4/5/x6zOK5+cgIhAN3iG90g7oavERZpVV/XfrJGf3Rvm+hEK99wI8y/BLB1"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202112230.0_1644872771130_0.42782910538020236"},"_hasShrinkwrap":false},"1.2202142035.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202142035.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"4bb5570c3d04ec8e2a88418e8ed8b420e5b31ce2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202142035.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-b++1aPaqmN4EuunYzKvf9NCCwEfOz3lk69/qP4dQZiVvScgNyN9+cvZwIdNZNrJvPGGMbZHPfDXAME3qJvvQ0A==","shasum":"3724a23aba70cb9978c536757282b0ae56049417","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202142035.0.tgz","fileCount":30,"unpackedSize":1580563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3GACRA9TVsSAnZWagAAC7UP/jHmUBjQDvN8SUIsmCDj\nwYMVoadPpkRASs6GLuYNsrDDEHDWZBuyNEdIgkYGZcUKAxAwx3iU2VS1ZZa8\nTOiqftotr7kZgajouV8jXDX5I2ZLLcB4tUTg8Z+EZ7UF49zfr7U8cddC3OH7\nnl9/7v03h+PlFMrCjyosCW3V7UFsK46RIPF0nQF5QrZ5Xu7vplzkmwQYM7r4\nWJUxi0/e3bVOGqDHkpzQrGvDBmIEwevfJhrggSzqVugTrTkt3Ua05hdy1qBK\njqp6ybbQM9MGZHp19gxQk/ej0wSpBEAIt6zn4tEgFAA99xp2KwXyw37GLDwO\neaGFWZ04rqRgR69xfxh3pE7octf2iEkAm5oVjWaQ8fET80ZfoTPy+ObapmeN\nCwitYMan/JesC/YNr5R7eJaDb08YMb8ulhMWYP9WrI+z6J/qGDnwBA5o+2Ff\nOYbdSqsC4hk3rL4y8Wo3gigQTNDVjZt/rhuHSPQ6tmYuE54lVl8JuyDD3xhw\n8ow5AuEI3wAgDOo0DzxUyPqsauSOvN++3XvXMQARPOmUeILZBhGpN7e1ItAz\nx0xfIeVG3AKV7mG/cP57D8T6x/8GAFzPKHCwL8KI0ttR0oSlVxW0/vag7IkW\nxl+AfzAXuo2IHYNV4e91pHdLBTYyD5FSZUQXOoe62jBhq3THe+xDn32UOn7F\nFmkQ\r\n=7XaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMJ4Y0VwWaZw1fuR5EA/QlIsRp0Tb6dS1ervmb5yROfAIhAMa3cp3oXqIYOAInHLl877Q/ZfCUIXjDj7m0kz6rRo/K"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202142035.0_1644917120033_0.5952460332991356"},"_hasShrinkwrap":false},"1.2202042210.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2202042210.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"a656b221ffc7e0c9f092bede5668a546628e9512","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202042210.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-k72gi41gDx3aMt0QwCk8z+Ab3+4CvsyktE85d4uyrhbhLBsha4yqQ8wK8HFV0DC1OTvmtUzpE6uZvw5HNktu7g==","shasum":"6eb44f827c02750d7f280610541cc27e1200fc76","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202042210.1.tgz","fileCount":30,"unpackedSize":1582914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC++3CRA9TVsSAnZWagAAqbsP/3YsQVZckMet2Zuip7bM\n63ArwXjstIlGzjwTNzQG4GXs5Mrfj3Lbh7n5wiSgFYnuKHSwEfPdA/jX/EJa\nIfupRRHpwZl7vM63pyYysKLv4t0sWve2zgylqW2+ch9zw3LJ8bGlwCroH938\n2YMjwmu09DPSSHgtZ0/kAuuOr6JBtqZyS1p9yvoxidFVcoa9VHqkhS7w1D+T\nOXobgwopoR78qffcPPtOouA7E6CxQlv5mXGyWL0z4vT1fqE3qJr/EGsrNvqB\nBScvEV4zqr/aZi4kg9sau9MpQurVWODDcon90A9vpqZfDyW3kgIwdorHCvvh\n47WFSHcW7Lo3gblGA6hri6xr5nhHwNKTYFaTpIdH0n2osIGZrMgIKDRP/k3s\ndtwIbzAxdA75BlrzPF8gUuoLZjQzMG3sMMmUnCiwRTqTxOOvkwAPik+f2VOB\nwnLOwH8NlxW58A0YSfbyEbLyHp+K5S0R/EFQmB+BEV9sP9DdA6nhZaUBDkxd\nLmkwtKrdddPo45tV+GWaMQ5Ayq3HZh/T1Ui7iG2E85chdsjtJjFaEdfaiAyo\nAwxPE0ENulIsLq63lgzOV9L+IXnzx8XZzpnN/sR8afWdN6Z5h/5MdZsoVY4v\nDgRhjaFHkWmh1g/B7TvrIXkrLr0qlMrjvd/aQ1W6pMIvhIGhZp9YViNhb/9N\nT9Dv\r\n=5hCw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAWWz32i20ePGd1Ge3R9dOtXczDQk6I/FMQRKBJsGbeoAiEA3X3rN/VEtK6oyKSCG3isSUFKM6jdjdvPODKrNSx3x6k="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202042210.1_1644949431188_0.36587462288806116"},"_hasShrinkwrap":false},"1.2202152253.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202152253.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"a50f1711cb8aecae95387e7f6b1fd1862206166b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202152253.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-u2YIrG0Q0CKDOnX/HbNQxVuBHqTgZdo26IQatVFGUC2MaKk39ieuH9eArgtIa6BGSLEyJUGyZ66znXl9hT5/Ow==","shasum":"cb297969d729fd2f855d04ab54d9405cfb9b6a1d","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202152253.0.tgz","fileCount":30,"unpackedSize":1584303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL8mCRA9TVsSAnZWagAAob4P/3VvE1KTZ1Eg6g65gQZ7\n8/SjjSE1DHuoc9hfoRUF4rSYWwzA9XqPrNAADEncpsLCGM6MuxmSF5qwNBkm\nhbvS+wdvgGkOOYzrLa9hcBdbIcTgl1Fea/YT9LqgFxgNQyB6IJ5uF4bZX/D1\nrUDZDsmLSaKxXD+gFBWBM1cd9rihDlkfS24HXiXZtsQcYauBbwOdpHfnIl0a\nh2sPBMoTceuAiz4ZrFwLUtj/+ItX+KIxKxqL45jWwTm1ugTJe8Lxun2j3Io4\nXkE4veOHYCLPoEUGpmGXzp9yLwzuwC85OmJxoSsHqEXFgzjvWuB5SJSaBw/F\nzkm3RwwEpMa8X+RruJoxvxCot6VI1VM5ssOVpdYUpHeRwE7bwJcuQ/DmjshQ\nwd9q9OoGaJya8Ie2id4hrt14L/Y7/6vax29V6rmNT8839QJQrRB4RD8rFOgh\nTZbVZZQ+fFze9O4mgXgEIdsLdATHPzh7ZSxWrgRCmJQl3+/gkicG9KzNMR9x\n8NHDyvunAP3N05xQ5Anv385m2fjUkmD/I/cgcGINwye8KdbMCI5gKDTkBmat\nf+HsH3i6UWDA7UTlyQFHNNPCME/7i3LSJUIIFUfttL06yqK4Yz5Q1Zz4AzLz\nhZForMLJSWIV8BDDadsiPh/batd7mzVgK/CdAxS/ZLT+9QsTURwYBz5NQkTo\ne9YS\r\n=+BZI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAqomGiWX5C7TJAsvSm9ocFzGYkqYhcI6uJYM9ZhbPZAiEArXrVRczlU1b/rJjaFYE5izNiDY/6Jjjv5xIXcPTQe/w="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202152253.0_1645002534763_0.5154234973691474"},"_hasShrinkwrap":false},"1.2202162256.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202162256.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"7548b64f77fe070829e46481b6fa247b8813958a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202162256.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-FjikdWTYf+qUuLU66JpDMyK4y3f03xfyTAxxXeqQHNSwQnqpxLUyomKGiCk7+cYqE7zPfLzXrOrylcj/nFdicg==","shasum":"d3619ab536315a1f127fc293d42d08e6cae82ffc","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202162256.0.tgz","fileCount":30,"unpackedSize":1584303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhWIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpi/Q//WohSIdASsaqdqFQlSrEGz/m0iT0QlCH5n/tR+YxsvcnckzS0\r\nOIWdtTKwGuApw7mDRJgpQxXkt3GB8v3i3oybgrV5zA7S/9sHvrSUhIT6HJqT\r\n/ZU+JfefiryN1XHQL8N6wfbZ25FQpdqUo826r77nOZ6RHTeB6g+UXmFFP6bZ\r\noBplEw0bPG+DvMVtt2ejIVg88hAa+tnD59SH6lbw63uBI4qvSUW/76XG6VnC\r\n+wZ82iiuJr10y7FB9ybKfTSJzA4uLDwvX+o7OYV2haNAr4TsEkxwf+M59UGJ\r\nHOGOEQ3Mws7Z1OCEVY0mAKgMI6biHDSXO1I9fiLwlzMniTJYRK89NYnGy0pf\r\nPKB+pTVh1GKR9SehGWCSwnIif12RMB6NEKQzBb2dlLN74DyEIKywJIesA4r2\r\nKvP1ZWrQ2ZLyC8OG+52HJUGeP37709m2dANOh4feMn6G6cSrjVPW9inMNk+b\r\nocI3cJWOK/ghMPPPadUtoxDV5HhOAFXCI3czi06IxZQeGlDj88nY5u+DgLf3\r\n7rUS0lJNPNEthrTvw7UcGAAP7vWfiDI2ccuVwtL4SQfVNLdpOH8mISekgeS7\r\n+1K/RAU5DkqYxDe2qUo3Mcl1+jCekvn6d+KTprdWmFqJiQCBI+h6sXOYV6KZ\r\nfrH6i9QzCCCMWJ8BqK9DT6XHMgUklUryPD4=\r\n=dnJh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF89s+9djEtbsV5WRlf7Ru5Hm+1xUtKHr1CqwVZh3jCcAiEAo5FbjGq+m4ESx7FUw3XuRoImldz9IG8xvT4oh6J1020="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202162256.0_1645090184543_0.2892877796858002"},"_hasShrinkwrap":false},"1.2202180255.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202180255.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"8708c2591965df37c54fa25ae829421f10de58aa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202180255.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-UTHu/uJbce65/QmgDYNKK/v9vvKiNwGsxBaRzKyY/5hrb096Ir+74jBVSafxN0rOfKwzQozj3Kz07W+iq4uRSA==","shasum":"82cb08a9635180c3e717357f7e4e8ee0a4a4709f","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202180255.0.tgz","fileCount":30,"unpackedSize":2836117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD2qbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmriug//VVIJA/NcSeQ71dWuq+wi/yUKlPC85+nQqsf4n2TS+em+7Kx8\r\nh3+2xUdQ7XQJyG8xhP5Sa4k8BdOyFA2QtTPJiPEZPfjkfZ9T5TDqJCR4vY/8\r\nIIy6mpm8/5TXf79oWRKYuQ0XqNfxr/yDzy3EuQcvJRGbWxHqynr06BKgPCUn\r\nq3rcIGITXvHAOcQj0Szj/nmj2so2U5ll2ZjBvQDI1YoP9cTAMHYJZv6T1I4H\r\nDNo66Yzip/59Yn1rpkxMLQjoitmSM6GRKUGdcBheZR2R3eHHUJ2v3+gCiuP/\r\n8xJiwAloyGLV8msHGeXKNyraoHpjqlJ1FJE3q/uOq8+RPG+458lSoSaptcpo\r\nSq1u3dm3uFjJH2gfmWNIUdpetEW/pnkRgjfSCvOw7V/wLzi6R1C0NobQCGSB\r\na886e8pOYKgkhdsJqn23b7mfgDMkaGJrolQlxEcxKTEj/FF5PajPA0RIdAQF\r\nmt07SQNhiwyFNqoS1Nm6k5c32k9JOmiqP9LC0D9zGNWlMa172qm3afINxVyQ\r\nGFkqkjRuIOkqcRXd+vSAHpByRAVsIYszsYBasBhRmio4Wi+dUf4sO7sDpiRW\r\nNpN//bduur+nWMRQqcZBpBNP8Y120Tho/lkR6ojcPeWb3EmUhSRlkBGbQRFi\r\n5qXT0/Vz1pmSKm1NeK5rxOv/8f+W49Vciug=\r\n=WIo6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGw8CyfHfiJ96sOup7KqMKc0nD5K4Z+ZtA9nhL5r6ItAiEAxelvgWTmGPNwOtMw3nSfDKmDSJY7aBO8d/jRRrxRYCE="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202180255.0_1645177499545_0.5538773711234743"},"_hasShrinkwrap":false},"1.2202230359.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202230359.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"02e5f5f51d0375b35a2a20b27815ab79d9767e51","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202230359.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-Ui2YwEjO2uLDsYHycuixHAqxQc3yid2NUFSq4lgnZdTdfoEjZzPu/GWuP+Q2rXYm0EQHpt4azz4DhCqMniC7GA==","shasum":"c125bf1fa1715f3ea9265dc72a7bd73eec681568","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202230359.0.tgz","fileCount":30,"unpackedSize":2836646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFf6XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIYA/+IGTWa9pZDXTd0U9F9Z7IeELbk136pDEAaP3JfNcjZ0Vijz7M\r\nTL4AFOl3Q/0gQ8hYDKhkJCcCC5S5Tz4Nllldd0W5qsE0lY4XtZ5cnlNJc7L6\r\nt+blCGeusoDIOf3/AAlhzPS9mDp9DvZOFSO/5hbm55q3igNTXTKEuZehhkhL\r\nTzKUFz+fuvJv1f7sPbPTSoI4o/xQhjxGvFEHrFR+dAsIEpjLIpJjEwZmooyH\r\njiooiQBXCH1oXiSRdUhQFwYlES8HFoT4ZEtpb8hNCBno9srI1GJx8XWu5Y0l\r\nKf056h2cOvdi/92FHGszfUs7N/TalIDT3jGp1nLWv+OBtZFjw8NSL5QtNzUW\r\nCl73v6ju2K4o/w8kcqeJUDXWNQqHg7xnBHFJVQiCOcpOUjo5T9p/4kUG6mV4\r\nS6kxXsrcFSj/PgWCJsG6xXKSZyHEnt/+YEjnA13HGuhvKqiQEH7KZcUNYrPc\r\n+DJXTJzIE7VAbZMwMT+DbkKeA5xNS+vEBH4cnXlhF/vNl5Du1iHjKdH1+VOF\r\n4Cc/ANS1XxgZ2+uFWCvX7felV6/4h0bmmp+VmFSGz9qF1A0VjBwClJDL12mq\r\nVRg+VROCVtQ5/cl6/UUz/iCKNpD7BBB0O20x7t+AxSy9PZOBeIIBoBviWuCL\r\ndy8TIfCzAm1HtUaqOUOinN6ZlvdLeu7/i7E=\r\n=zpGy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcFPwgzeYXJ+DQKwNXLjjxzlnegL32LvKGQAb0d8AGBAiEAmZTyroANRWLkC85qvahN6/g/0q1H6AUvsgD4s5d7FM0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202230359.0_1645608599310_0.9501678010248236"},"_hasShrinkwrap":false},"1.2202232232.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202232232.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"66c8923bb334f4cf267bf8feebf822629a9129ac","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202232232.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-P4yg4KJMoWGbvWLgFdvaVMPz9PBQV0MESu8z4gcneXzzDdLm3+YYM8qQ1TBSWDpGhMMICavnz0c99EyCnJzZhQ==","shasum":"3c65cd91a262186b362bed7c74e4fa5960f21a4f","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202232232.0.tgz","fileCount":30,"unpackedSize":2837317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF6LOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpR+g/+LUIkDGqBdyRFP3AorHmJJ1wXuz4rgmATsVSuk1szytpAg1/g\r\nSkwDElAHfWnewTRHnsFnao3RTBFJi3CUOyEupPB7YUeFEMsnSIMTLKsg29Ri\r\niFfEpAiYnctcDB9gsZIxwlO0ZmvfTH9k7rIlZcXlgjxvl+T9th+X7EYzR7fJ\r\npEvsM01yhnFMsb+GXNE0NxGBn3H7fw/lhjnLPcTX6AO2zcDddSvTo6m1WoXP\r\nrYYFDXmEaKBsSsDgaLHe3Tl+RrJkTEUMbd6szyaPzFhi0BI77QGwnL12XguU\r\nEggazqC9iB/p5iY9Z2S9Z7zipoS7ZPCJCJwu1JfNmk9CwVracDA6/GAdLhHj\r\nSHBtwmebcVhOp1cr+u5Q22ASlRemW6YiNXEXShGcyMrQuoMjiGWqqnKk2MoI\r\nbxNb6nWXCUbE3ASRqPYsJT85gVtFIEawCsIJXCYR3ES0DNmcb73DZPWh20KF\r\nsINavj82IUt9opw94LmNZvDSPFV0Lle6H0BXTSn6YeqMb/GEa8DKxUa14u+r\r\nJxS+foRnZjbr6NUtEK3y35REN1Qy46l9tCRSRexl1akReJNjjwiKoBkG8yqm\r\nmvNtIyAiG5z7STx76yAwnXR3jIBMS4yRWnUsOjO3I2eag0rye1ZaXOjXclLM\r\n4gKueHvbxov07b2QmUk2A9VodmTFTmTvD3A=\r\n=p8h3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSOwKFra9PlGnYdvZXWq0csQ6fbxI320gxAobaZGvl4AIhAPjRxI86zBz6W9sRFXl9PZNS/hAE3Hb/44f4ZQ/d0CSf"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202232232.0_1645716174229_0.5742632804050405"},"_hasShrinkwrap":false},"1.2202241911.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202241911.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"d0f22f13b53d3b67847e18749e07ae4640258f87","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202241911.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-mIiAuRjijJgA15EaVpsqfy36p5Bhg8cYSuKcQ5OqM+OuWvPG9af6Lxo33mqq0pyJuqh+gmKFJD1MqEc6xacylw==","shasum":"30b623e02b95036961d25fbc83ab8328091a4798","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202241911.0.tgz","fileCount":30,"unpackedSize":2837317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGPMqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0GRAAnuGrzV6yGVOBRJWpYPZTQeSoIUQqxFDcya2WA74S8RoQD4hW\r\nDMufDzobUa8zwt+mNmM03yr6/y1Q46w0NoN14Hs5oGxJ3WvNeZdR/Nc7r0VE\r\nMHUEmFVHA8h07OMfTUWhYl8ZquO8XKWqzkXZ+ss50tDS5lnB/UR7Q8J/fIou\r\nU6aFDgF416uY7AiBrImG+2r2O6fib3US+aEhzLOrHpLwufAbZRUxtv2Oz8KE\r\nPv3gZHrLJ/Uibj4QZXTevwUZ6oGBqZJYUAjBrxfZqauRBUtVVQtFQYBeN+hD\r\n7qdeQtEWNqQNbomUIk4VDpgQYO6afaQYsbo7XSJf/Tq48h04B1oPkOBDWzrI\r\n38nC4PGETCGwEqhRCxDiqyQhw6bXB/jWDjTVVu3/U7gMQZGL0x4BPNvgdbdn\r\nSq9yZ+W9a+TjEqVchTzrparOjBf+20MfaHhXXxwMYbTRfLuE/hPKALz3JA+n\r\n0ezdOUMB1nRbyzrB3Gskv8OQZUcTKGNEQVHpJpYTkReje3WWcYpi1l0fBqR0\r\n5nsuEmwT5NVJ9OgfPvDWP20yj46/JhbpSDMvAR7xQl4COeymRDHc7yMpBl7D\r\nWqQxQ38K1++tc14d6IVFTrrBUyxfuY1QoHyef4yDw8w+5URvYmdif5D9KPtM\r\nSOED1wmPWCj3oX3BPOQhL/hgZ6xyVkN/hgQ=\r\n=14T/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+5eivw4iZbbCZN7mUFxXsNUpUy6nUFrEaIkNWFgquwAiAzS5McXGV3Y3RU+5l7mG3Rkxnrb1uvQDvVPDmXuMVxbA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202241911.0_1645802282287_0.39521040329497437"},"_hasShrinkwrap":false},"1.2202252101.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2202252101.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"fa0da0bef1bacbbaabdd17ebdc31b018e6450c58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2202252101.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-7lRCofzmirKdSgyAJkhfJIVjB/06uRsD7561tSGrZyPFD0GUi7C4mLLo4rYs1ro46ptEYDO8flytH4KFEXbZBQ==","shasum":"48b3352afb6b5367c2376056abc099fc39b21d58","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2202252101.0.tgz","fileCount":30,"unpackedSize":2837317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHPyCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtOxAAo6skyoJOEcVBcqFOTZ58ScL6rtcR+NFoyjMKUEhCTI8kffZI\r\nWXXVosWDv0KXfneRRHlwCQ3B7oEcaaGLjJVKrldn6NHedcj05lNlRVOvdfvT\r\nBJY5pQhAiIBRKhEnPkz+VQFw8xKMR9+kN3sAK419B9KRQagoZl9QcxvbXsct\r\nhVIFzdLNi1nOeq3ArZscBuSNGx3s98oWHg2ACahygunoRuYMV5A+A2cBM56s\r\nYpUDEtGAoqqwfmd34X928OLSZ6Kpyun4FWh+mLAows6Vjnw7BXXMLShME06A\r\nx/SEY2jCXGRtBUZU44sljwtC0Pbdi6PmqO8SbO7JNT39Nfhtx+W1YxKD/VRY\r\nGgpz15SL9yqrgJGRaUAJsLqAIVgKMdEX5o/xU1SQZ1flXAmhwtsWczeN0KNi\r\nBC7mozvX+4lD57pkYEqK8UensXD42XKXerCV0SvKGssA9CoJpfnhueH9gmP1\r\nORW5HFAZeB7GUhuVxnL9PiTWSzpc2UZghjSIu8g3ZdLwXwbDv6VKzApsZMcB\r\ncCPkFwQWfeMzmNiSySvLgfvamGYe7DPOmUC19UiiPVC09LE74V4TGSP+rn+Y\r\ngHDL9xU+nAFBlyzjNm90krUmJ4czCIzrUA6pKZcAMmG/aq7FOBoFTyXDzL6y\r\nA+kkZK1dwVvZ8PF/eM7HNdFZenUYFohhwtU=\r\n=EZlZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICtj0iiKGSpfGXtmGsWj1KLqdJZZRsxBhuCINfaoc7KUAiEAwxU2ePvJXOu1ZdKLuoCxRQDmbxA/N4CTy4G/v8ubCTw="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2202252101.0_1646066817936_0.23624176928675822"},"_hasShrinkwrap":false},"1.2203041950.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2203041950.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203041950.0"},"gitHead":"419d49d2920fbdf4bf88e8efc3421f7c37ec209b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2203041950.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-/yjhMfAnymsB33vnFSWt4LB5/IpktzYWJWhh6wpcBghUGT0ijPnrZIdgjzot2hgqynTDB3E3YFu7Qf/rfwXp4g==","shasum":"0be2909d6d6fedf590e4afc9c6b00536bf034524","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2203041950.0.tgz","fileCount":30,"unpackedSize":1721755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNz6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6IA//WovbDWmOMKKXBE/KCENaUYoXwtlI04GJ0YNxsSdwYFOO7rru\r\nmzEJoyMyGvOVj128C9pmrr5oQEfjimul5OjSzyQefOHZ/9NtHg79ZqAlStQp\r\nvAmb5DrTH0wpSPNfubyuBpVi4w873wl5/p3o1F5E1iwmTtPI8J2ZXYpPpANi\r\nffL8gbWKoXVgpajmKcBlQgK+jcfTuy92xJcYJTiK46k9osLI9S7EnLEqpDy6\r\n1ZynY0DzMTyf3lIS7w1XbXt/S0cUHGWDkO+PNRrSIB9O6s5HpTH+bAsyIl8J\r\n2H/fWzzhPJ5Je05TcWuEDaeURW37/1RSGIe0QDZSUZyMWteMgpOQFnlf9LBj\r\nw6eQyNhVfGh64sKTnUflr3e2gBCIwRUCHsn5KT7uaIiVGBKWo0E4zvoG+Bwj\r\nJmfs0iJxpHiWB0yTVfKSLZ51dUgnQnD2jvFCQFnPUvpqoKLSmKCmmdTGpeY5\r\nbXcU7Hy4CiWHUv4BXWZgaw11cNxGrxiFSNA0qSjVvcKxpWstuCt5fHN2DGFu\r\nxnjgGnwKDHDKi7keq/aA8MQJT97ylRn9Ni9ZPj1I2z6bTjlZTiPhpxLsFo/Y\r\n82b4O0kMftiMxGZQLcFtFXQB/Zvq3gg714IYg9GIzh3uIdWum1WZm2Dg61e7\r\n5rRnhYA0DEqc5OrbUROHBh2Hcxe6jJehZX8=\r\n=JXri\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHPHmm4jZsBaUVUKq/ox9lX2lkyvYG3xP6VOuE+K/tMNAiEA9fn9Z/qlD8JHjJijeh9csQBGO3Rk9UCzcNLj8NawGt8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2203041950.0_1647369466308_0.31734796434429047"},"_hasShrinkwrap":false},"1.2203151539.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2203151539.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203151539.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"fc739c0d339dbae236fa53a87188f5f7ca58f25c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2203151539.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-ui+r77/f0Wq0g9gcUXHjCuRdALcPif0OPy3R5Z4V47cF+LeaoaCx87K34gHVw9hqQxCbAHMb9px+SmnyaNNO4g==","shasum":"7066f991bb619c0bcf1dea1ba044f0e2a3f6c1a1","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2203151539.0.tgz","fileCount":30,"unpackedSize":1721755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZ6cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPoA//dvGeib8bGZ5AKVMDQ6uAyaRdTA+YWvNW3A69qC77eziWwJdG\r\nVhGtOKzYy2c/W4esP/+fAgiwwTBIPhXmI+c9Zyzpc8fAq5D7VO2IX4eNo8UN\r\ngx5dsdpx+vHZYe3TgUaZCKCQNcsY/xeX9K8iIaV8sn7MFbEQgNkxFoMwVSmQ\r\n6Uhr3HnACUMWWIsKuStLDI3iedPBTCK2XsWCAbrjOJq02juAoxdPxS5homaX\r\n+Mfh+QagUYKkndjIhS93vqMAu0BNP8ceyful2ruS57VW+VfBX46YXukYkevB\r\nn26cwesS/HX6cUZ89pOnJe03+VJxrXTkk8WUgBbBzdwgv2PAvVbR3O1fhzpl\r\nybXd48FmaC2nQGKBOad+lVX3ajp6MsESB6un4DzFwNVBpiL3MD7TJbYZweyB\r\nBKKaKV4s3Mu8d+VSJXyj4uqZWxW3dWWbs7O0QnrjEyHhgnY25EMX76GIuzar\r\nxEbwW42dH6ZbVjXw1F1MYUlSmInBQd8sfMrWwXW18HqjovNc1EjdBaHfF4iy\r\nbfKetH22GVAdqrDvdwugS5lCrGQJkjyXxWtsWZPZXhBcQlGOYIhfPJ4B7irH\r\n/1UyYwPwuiuKkD5R7Uehwj7BGdHPvC0eqdSvhAPugvegsBa+QIhycH9Fl6aq\r\nTOi0jVkGX2un05OxGd1AntCBBVwPRAWRKAU=\r\n=Dt3v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWaJyrb77rx1Grhn8MhGszStFqKc1itHbLEmLfzBD44AiBD2WVvr/07g33Od3rbQUlppw3r4sxlWSXYBsbmcdQugA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2203151539.0_1647419036231_0.06337088270028812"},"_hasShrinkwrap":false},"1.2203172113.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2203172113.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203172113.0"},"gitHead":"96b2159ef70d24edf6c33303cb76a623a4669cfb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2203172113.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-sL6QHim6ld/jctSFVq8s6DXcxORjn6FDoHSHd/zktYPYCH4/6M6g6tIaqiIO5M1igh5ZIhkJse3HWuHFW61kUQ==","shasum":"b9d072b3669d5110c4c79d7ccef6828a2073e286","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2203172113.0.tgz","fileCount":30,"unpackedSize":1721755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNEHmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOdw/+LzSLOmYdbo6TQ0nC1T4Au2fZRGK1UfaENtgH3SzPiu5OO79Q\r\nuDAgm9jeoQQo8hKkeYCVqPJlHnsTe/dQogGD77HMmA/xAOKORgYUKKeNIhvW\r\nxKGG+hUBm2+kpmL5cNyBOQl58rMHyaBtJlSOlKlnNWxHb7Dyl8yCug+GLHOi\r\njGyo3pY6DrDF55cLlfhrocm71n2rqrvK8b1f3UufveS0zx+SDBYOX8DCItrD\r\neg8DmlfD5dymtfRUmsfHMe+2HTOq6dy00Fq+guFXdkF5ZT1mSTe2KJs86uZ/\r\nj1gHVX3xrpQHkpN7lfdRY/vxUpvZAkL2veL60Ii22u340vLCI8sAl5hDmU/h\r\n3YQmY9PN7SvuZ5GJX7r0lN5/Ac0Ilt1SypzR2a5jgsQW2JIL/XNTCSHZgzBd\r\nbKyRjY4FXDOgKGzXBwnuW1xwP+Vb5Ib4cKxCgSP01F4dF+rEVzeJYRTxheUF\r\nrcwloyetEoCOZOA0LOkviP+F+a6WH1Wu4fV91E7OrNxyRkdQl4DKxXJGpm2C\r\nAGOFm5eSWu4Nz/cY6Xz6XODMU0pKXceaiAb45aLssiIh79EJbMV4tK52iOrl\r\nvtZO71Nmox0cDH+DuIHG+3AqriYsB9yPgW2ifJGqDDV5rTCrQvAurC9DXy+2\r\n87LSKhl979j2Ib3a5rMo0bxgu+4SHrR3MHc=\r\n=DRLa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgQHTNkxzg/I04XrsPyNAUaVnYtgBEDzhfLkC8ELjkdAiAS3OLwyQUft/RscXovm4jRQlOv+EVGyEj6mw0lMLDLng=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2203172113.0_1647591910299_0.8762591946752234"},"_hasShrinkwrap":false},"1.2203221937.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2203221937.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203221937.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"11fb2607ccf78c526a38e31bc141dbd3ac75d326","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2203221937.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-6FzjvX0EE5VJt+w1sAaobHLRDX1Mqm1DBCmyM80XVcg+V964zmUjb7vv+n+hSry21C2JGBhUyGiSsreYpAM5mw==","shasum":"a6544ac4cea5eed423a5c50f609bbb6debd5a6eb","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2203221937.0.tgz","fileCount":30,"unpackedSize":1721755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOtnWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6hg//besa+rq6vFhq0mCdfYTarz8PLw8Kk8xds1n3WMQU8QJkTvja\r\nQtUtRqISFKwdORNCiEAy65MTlWVZeCBqT8VRQdW47pET6G1MxUexzcbdEBTn\r\nR9OtnvdtGYN7b1+GZFRGlrAMaebUALD7zlpmOGnyHkFfj4trnRrQRxyoCk5W\r\nSC2ueQFJILkv/H+AfmfXQJkJ955tNIIkEfQR12Rx0PJ9HON1waCDiq4IJoU1\r\nviZL+1DPWREsq1gCBymt471fTc9X7g3RHc1IkfeAe+B9IF6tOgKWgq5+1Yt3\r\nZ24UpVIUwPygzX0Xv46dJJFEgnyzXtqmP/Aup78v0+HFSAjYh9yoZ9gbs4NI\r\npwRCXUOxT7EZ3yZpOTe6bzmN2uRD9QkTtwc1yRHt57EvHU0IYckFWan59IHX\r\nKTozRpYE6DYruVDEwO6p+8xfiEL+9NVbmbRq1K3kV/oLL7tohtoXg2I2rouF\r\nIH845qlQBUGkH8D5iPx9Y9KahSINY4LkOqGQgPp3/NnFPZV9gxms1rO0zuGB\r\nfXWPmqkQVdLJw8MU6swQy26h0fxQijfKZv8jdPgauTlpKjQslUgjZ6u2RlIE\r\nhdKqss/2whFq368FjlNlKsfLtPbG/EaKN4uRo93VGT9HwNqtxl+heSu1HDFv\r\n/t/gKnAiTYiXk+YPNFk4VA0ZioZdVKWMVS8=\r\n=xKyw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKVmcRqgh9tbL657JnySIME5eBmzD7DpAG6Dt95gB6EAiBbXs69sMjOZbZ/Q1K3L8xNS2oAjSJ+noOpW07XHBMzmw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2203221937.0_1648024022131_0.9391659585773697"},"_hasShrinkwrap":false},"1.2203231914.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2203231914.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203231914.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2203231914.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-qyLNBWWOHrCGpufDFezyEO520+xCx44ZrA1OwE3NhaL0tnaZDsCBTjODKUCcTm/wv9SDWIOji0Gi9NSVTJY8DA==","shasum":"0ad574e67364a60d0cb73a1f3f4e3c0fa29e8c4d","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2203231914.0.tgz","fileCount":30,"unpackedSize":1721857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCrtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+AxAAoSQCBNJEG10d6AxZjuFjijliNsc8n6x7BPz3IcaT/qzUH5RG\r\ntuDOgCuICNhSJpeIzbUiIUbYZivZM0nlGWMW6h5ZdI5I1elp7umJRvcssUaM\r\n4ayoA9tDdsuTznVGrP7TbIJ8MWuAgzlAzbToIF+rFo9Axw+1TT6ezcsyZfDU\r\ngbkfgazskCi2FVUnr4DxMqEret0UB+Y8QmYlmHSl9yIeG4CClqW0PZg5lg/F\r\n3EmUi2qbQNqgWCupMdyHPZry3FZUdZYo9ET6EqtR/SWkQu5gA5BDNw6sFhRi\r\nSMI9GZIaT2jeWzsedjFpwfQF2dTNSnpjFcvbO2Aiol10Xj2BVRPGFqKcWJDM\r\nRlj6TVVklUdr9w7urk0hAsIdTSW2djKvuM0AFaGdwCOGDhOAlnWk+B5Unbtq\r\nrN8rN7Gd0n5oJgdv1VnWplcTaoEqDyWR1YHD3m0Vfq9nP2w75nVWjxnjyFgR\r\nOWKNTteKmWiwLfLfbzMbMOac8hePhGpvN5Pq3O20rXwmpsv3ios7J7jmlDwj\r\nQrwdzBaNLebL+tvs/XUl4EUJ3KE47Xnt5WWpYf00pYMnBWdEp7mOQucXzlyM\r\nwELgElEe852UMbgYNX6D0i6mD1IdVlfUYANYDMubhFGc9cTA903w1lrJY48L\r\n6kHSXtqt+B1Dv+2sZzeOeHDqLoBKi/npAVY=\r\n=DIhK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICd4ZSMzcM+UCF2mJyDmrF+0LzTAkcDIj0iI5kzF+y2CAiEAmIhGHW2koOCR5BbYsNYB1+Nm3maFfGpIuo+n49y2aYk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2203231914.0_1648110317579_0.7525190363648886"},"_hasShrinkwrap":false},"1.2203101844.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2203101844.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203101844.0"},"gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2203101844.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-Nt6p67amfYY12Hhgo7mfJsX4GuuNDr8ghVQiJnw0/j330YY0CQB6toUU2kZRDso78m31S9GfxF14hSPKBriQcA==","shasum":"379afda241f3eddbc141e65e3b48bfb82dbd56c8","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2203101844.0.tgz","fileCount":30,"unpackedSize":1721857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNCFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6PA//Q7qgekJW7kP3HODJnx7PRgO4MP6UPqrAwBeh0exSsULRgpOL\r\nlWMxZEe131sYFkgRXArrsQGM5JXn86XzIg8wSfLtUW2NkwhRJCyWxBvBp7Z+\r\nupQtIiRrjsp5mlaB8D1Bzrpz4vNykc76SA3Yb2kFNO0AO4tuvRNiqmo1Gh8m\r\nmQW0BLRtllNGhmfCtwk450p+tJuF/MvJEX725r2KzVASJAmL5lzXNRHwOFmp\r\nUWJEdDFwGyPqwTM7Mg8r1KDx0HrxGCRztxuIsezC+9rUHVGu5n5alpGpPVhx\r\ncFwUmaFZ0LDnkNUzDizocCrMmZCoBX0GNj+/cevc11dEn9MREY6VZAe9hsA5\r\nDWbeUd373hjxEZKh+9GCnE8vWVqwmhWBwitN2tV99ihqOS6S7dwT8SKHq+yp\r\nKE0CJD8BWkrU2f6slLi8poXWDlXl9u43IRKVQOERbZXVVjyCpGnZSKYjjs97\r\n/1oek/ytweCbhxuPm7w9DO6hxKUFn4YRrFAo/+++Hwq8dNhCt1+YjWckzVou\r\nBtGvWLGYRClfQawZrLMf8k3HtFambYPkCCGKE01XA05jd74QaNil10SmmA1i\r\nP5np4QnVNCj66SKKN02U5Sm44E4uxDcoqueiYPblDt+hqoqLrE5QSZ7AzN0a\r\nQdEcS66onwko1JaaoL/xbfiRr+72edvPjGo=\r\n=akPb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICy+bA+6JVGmuaKUbU2ZPzraZzZ0pj4QJGT8EvgZ5TJYAiEA1m2wvzAYBx3g8haICuko+nDWRWNofNnH/6SzanOoOPI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2203101844.0_1648152709579_0.9749472622792743"},"_hasShrinkwrap":false},"1.2203281422.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2203281422.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203281422.0"},"gitHead":"f74833d1e2b0d9176900cb183c4edacc4ae53986","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2203281422.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-ZXHew06iFubAxa+0+0WNAOXrDsseFHlaEW4aE+YlQVy2ZyeVWN+S+wJbYndwvYZMTmOwyjc1l6Yg3wEaOIMimA==","shasum":"3349c10ba26d1560e885f0736076408ee2b16452","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2203281422.0.tgz","fileCount":30,"unpackedSize":1721857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsONACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNfA//b38JSMFMyVVSmUVVPpz6bHAMV5y8J37poIZDpojTwgU7G+sD\r\nsPm3XulBphxlZhl6jN3+wWe5LrRPKQ/01RXL8Hnl92Ac/qgOsUmongnxU9jV\r\nAIA6ZGt4DJG4JCU1SmLHGk89kpqrdFKGPsFFeCzjHug35t7LWNNYHHFR/971\r\nNtlUe7qIeKwDzSPrmkm92Y/ctoxREdrxYL7qMVBkMPZWvZWM3kF6YpkMwxcS\r\naud1qrCh9itFVgIqwXN81MU8FLhjU8a3Kcf23w5H24PItRtU0foM9qro7Kh3\r\naOQavHyAgmH1Vktp5W9lU2TCk8U7PQrwtRCU1wDelU92HsYQTT2o0SacesPT\r\nd7ixwBRq0rQDyZSIjrnawLj9E6WpF2umDX4PBAGNlW8JrjQbnkeKewF1Q2uJ\r\ndMcKIzAbYvZ8h+B63fTnw+XAXfV8pgN/Ru2Ra/9vZzPx99Vio3xxVRBrAWFM\r\nakyiocEkEvoDxq8d7lngv9qYAqDk1zzgI1f3XdMbcVCIGoTkq6WLmTYnqKja\r\nhh+QAllEtfZO5LiC81HeoeeIKg8UTI+0+qk9NR3AtEQL/zQW1oKqD5bRL5aJ\r\nqYaQ2j83tRSoGJwzxtGtI2PGYwRtwbzg7bJFT4KYVpns9Rj66US9UYCiOC8S\r\nOC8NbsSYKEJO7X4ZDHa7cpfWzyUvluwYe3w=\r\n=y7fY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1seDObpYw9Iw5AeTqe4MLhG5lr/mjRBKr7xe6Lsi2qAiBCsrofcvVe4aJQMwi4Kc1kXIOzaj75hy/Fm3wweXyMZQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2203281422.0_1648542605439_0.9128822577627504"},"_hasShrinkwrap":false},"1.2204121632.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204121632.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204121632.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"dce11ee1542a2d10e47b8e9875dae137f4cc1b0a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204121632.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-x4pg/S+CcFBCFBUrnNUTO7ZU0wza3BAyC577jOKfhTYf3g+Zdhvwb8edHPISqJIJ7iAM5u/61HwW070Pk3NEuQ==","shasum":"27bb703e3070c1dbb6ea90891f5acc43bbc6b442","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204121632.0.tgz","fileCount":30,"unpackedSize":1725817,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUuxCIDxYOTlDR+AUdfg96SUpf0fbwxHB/HbS2t1xtbAIgODRpzUgZyGzJwFQoSz27cl6zNKGqHFvNZoEVbak3iE8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVcIqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWAQ/8CalW2AKi9JtD5try1dcojtDiH3lP/ZMCd5L4sV6OwfE6Bo3O\r\nlpR/Is9iCM85mhSBwocdSyChE/vAZV6C14IgVHspfVlrKh2uxloYtOm4TvLR\r\n/jFcQ8/+26fk+4WPoIQPecEzTiLIverGlkTb4dsK+bfJ5k1hOcEMplps66Fu\r\nvpjRfrgIgOyA8bJ6aGMpdyeHhJwQ1H+7oQgA8pd5sOsF/2gdkrhPxl6ZPF/g\r\n/ZH8dp+i8Kk4M28oGd6q/o47SEMtxBdLhqts9FaV0cXRyu/++I0qbPgkd3yO\r\nVd7TdldLGjzrW6xRAV2Sjr6GTLz4jkp4f0E38ah7/TEb8pTHhw3rlOpD/hYg\r\nOB0VxuQy00lXHM6zSnW5V/JB63f90T8jiVThsK8rR40WoHPqZMElnJ0C+Rjj\r\nGF8ZSWExr0soBvc5PeRN+7kBRkqp6ZueHKo5AB3tDejYMA1hRZ0xHpWg9kqV\r\n+OQtSL9YmmXhwhY5XMMOJedvSKZsLJpisAE7BsgnKqQwZatMzOgXBKBwTpHm\r\nwJKCuqh/WXpso93TW4lsztjjnXb4oPfq5T9qptg+dTeDjBprw+fAy1N8jCIu\r\nkxdJBlsffriZvLunBABVPB55N1R+Syfg7Grtbz9gOBGKqQaHo1QWv7916iVV\r\nBdcu2x/3ZF00vCumQoZ3C8itgc0ZIsxXyZs=\r\n=run0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204121632.0_1649787434201_0.9942648451834974"},"_hasShrinkwrap":false},"1.2204122000.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204122000.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204122000.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"9d10200b5a9784c35ca9fa16b1a4b3078aab3180","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204122000.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-bhs+iCxlDFHzSGUWXfLBN+5e35DPC49xKntE+RlGUYAeCQFpUOX/G0wTwzIxGnry70LxBmb2/AX9bBpzCA0sCQ==","shasum":"b4a550c22d6d3638c88fb350f1f402d4a4dc4931","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204122000.0.tgz","fileCount":30,"unpackedSize":1725257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7Otq4ywsba4Fn2rPWaMMhwMhltxUz+lnf3hRBHRo9nAiB0yfZAlYAmDt1B8Fmg3RRJxrxtGpgiJloK0y51BaAaYA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVoq+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPVw//UbM6dvnlh8S8/XXNU/ysqv3npp6J/ZuN1xWlXXhid2hSHEGU\r\nsVV1LzfD7JMAKQuyyhSI14qvYkZ6WkHEH67I+cZ1sbRFgPx1++sxXO93u80W\r\nly3e9m9sE2tulCtqsldCLKlBGzDczYD6I46WMoN9VzFahQJ0HuS5YgoeOdTc\r\nB2TCVvMab27Pu3RTirzFEVLxnZnPCZX94oqXeSeRYPDVbVQwJCmQ1hX043AX\r\nnOCSKTB1UWd6Kj6zDrM/23lEfTyFyfjFzuYKtZnpv8VcvbAeecUtf46IIIW4\r\ncPSDzv6XsrkzXC3wp7V1FCIQcMJ+Q53Cih6wmOIm//fcbPWVzDpcmqz6UAFq\r\nOMJEhOt3PEKVvDrrU0DDVtF72gO6GRdSfJcgn5C1Q4pJ5bpu0XNAmMwkD2Cf\r\nzQ92KPgV47q1rxuxsG++xvWTW8e4OJ2N1tj6B/ByoY+iRqwJeWxK0mcyKc1n\r\nzOtrGHKGzO52y5Ga4goAyOQHaqlRmHkcQiHbCKtMf8fc0B095bfBDs6cw1A6\r\nlcphOCoDuKu7tzTHMVWwQVtK3YSPD7CG5eD48TuszVifNGGGLI0nLS5JzQrd\r\nzomqztf9SEpX0MBsZmtbZYy2/oXmonUmbgyjf2JR6gQCB0GfeinMYnlpyIVK\r\nLgfZeTZ0MQMd9SDjOIz1Oo8XVw9Ayrkmt4c=\r\n=KZ8F\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204122000.0_1649838782049_0.4498038836594491"},"_hasShrinkwrap":false},"1.2204132005.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204132005.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204132005.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"26ab90e1d3f7c29ac76e3fe33cdbeec9e828eff1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204132005.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-amoibZT9RG6HXry/wtlRZc5TZVsTDVxpzhnWsIjPnKbne5NLs2qfKS6BsBXh41F/J+Rwm3LD9v+VgJ9M92KMnA==","shasum":"d7ecfef26010699d3004d05dc22f84132c0b98e5","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204132005.0.tgz","fileCount":30,"unpackedSize":1725257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/HRXEQXrdCSyPOwRJzOi8HUtWPNdEfhr81tJ0tYP0WAiAWLw4nDkVUTd4ng95HjCj/oKHzDp8Wq70XSt1xqYi4yA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV9ygACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ9g/+P5YstwVNDgQFlZXwrELHEZhAZvsded3bZk/zIIBSgSZ0bAG/\r\nwK2/nUeWNnQDWrf+b3/jFqsQOLarY2Mfv2y9BNzqTltm5bYijDBV5jXXxJsi\r\nclj67tlnrOnF3vBLW/YNlRSA2fI7Sm5MUT35HX75dG2Y2hvEcLOWk7/bPVL1\r\nT69P8fVCqMT4jbIuZtdr+3khQntrDKAbWMr7PocFmrqU3Acloyb2Zg4MNez6\r\nk13X8ZDOkS6Lq3cu5ZBfzN/mRWG5k7HUPdt64S72z0yhZuptH/H7zP8gv02M\r\nB9hLa6RUPuo5tlUpxLPR3J1WlGHNKyKQyWI6QQsk0HCHutY8s6JuWXElpxeV\r\niDvzeT4t0x2PXtMbTJ20LTZtVVyZbmKxYW2EJhGkWSp55IrWTuPtab21Gzz/\r\nQ5ETNtWU/TIJsJJWjAx3nJgOForafUZrpUlX6cnMCJJM+gVVF3ohZ9mqdh9H\r\ng0NwGkTY3Hdro4VIUFGxd9Tkqj6EjqvrEWm38Y2zPlZrEPq6CTlZhAcZ4B6C\r\n75Xr3a5GiF8cCmdbLJFmorStUisaC8jqSjDdacsHpYHlUWmBUAqYCvyrK1A3\r\nBcEdc8gEkR2gzwLwbZm4X9Ok1vVnOp4kqGl8ANIEYbL/BzflvGHopa/Ftvkq\r\nX2f8TI0rPSQ5PxIhprf22Ko0ZusMlHshb7U=\r\n=4LBM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204132005.0_1649925279882_0.25884099016057216"},"_hasShrinkwrap":false},"1.2204142048.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204142048.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204142048.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"32d29a09afd66bca55e024a4f21b1cdf6690cfdb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204142048.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-5SPbzpQKgzfWa8Z8EtV2+Bki5AsEGV5QyHL8it1UBcTCG0vFCLfTaueJGltUrc1aLu6wEVGnMvJEyCV+FQXdTw==","shasum":"f80a56ee68c02ed98424dfbb8cfef13b0e5fd467","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204142048.0.tgz","fileCount":30,"unpackedSize":1725257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTAjdQG1bNS6tqE8wWOizCHYWeRX8sucgiv80bcbFGsAiEA/FoWXM7vBv16OFVf/Chrkg/L9uUBkXquLD7efpFx32M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWSy8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXzg//YppLlfXPCTKJyIV/0bWmPq9aeLuKAk1knOdTmOVjikjilazx\r\nxeHDn81dmYSBquJGKrNp7HoUZJsITx758VGHCeQt+Yxl4t5Kx4fXOXTn59N3\r\n27nlyMoIKs7xJMhDKWtg9QJvulGOncNMhSV9YrsXo99ztGu8p7iVQDPezeq4\r\nlnB3nm06mu0tNMbL2dtQtJPVV+TTXbQ1+Ew5EsOGxgn5Z4KiiI4LYPFWbdy5\r\ndEZjKxIWtuZbTiem+NmN9767b4h590g37bsvLj60Q6G2j3qPRkERwRlk3xGn\r\n4rsm2bh8EFuveT8BuLRotwuwQySmkks0CBQcChFM12q5H3gEV4QHbg2w4Tbr\r\nQ+P7e3KCv3VgMq74Zsx3PZ14/TPnMY9mVwvYR7P64cpJRE6/a/AWBwg8zb7H\r\nstdJFXIYPSdV9iOxnC0XLhq5RQyySE9AsMSy2R9ZvqdsTE08BDmtumoyrDXq\r\nNdgWiyvnyP6YgtjRW9mwIEwZdMz+iI4KlXDpIchceV7GcKJ6EapgE47xiZnM\r\nmQTnY6jes8oa58NXEab7ui/BjkoOYtKTGYiSBmInEIP6/4JROXFxihgEsBZG\r\nMGsXJEj/2i56Kd0NeplKvl62+NpijE7KNPX6FJWleNO+8SZfPYFV0Kaom//A\r\nf6weeT8YU9Ut3SLl/kh2uK30EmBdAj+45Tk=\r\n=3Df6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204142048.0_1650011324026_0.8028407351051667"},"_hasShrinkwrap":false},"1.2204160405.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204160405.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204160405.0"},"gitHead":"a26d51722a65f29aa7f77872b7906f6e7ed62e9a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204160405.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-GSVg8n7JeCuRndb9SvPJFvN2qFUmsRChwimzRpJQLLNXen2PkqzqwvwIrGKQs89sMAnU2e2VZuaLLZvdyOQsCQ==","shasum":"94bf17d3dd57dda66e7c75d4df3a1da4de8fad4b","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204160405.0.tgz","fileCount":30,"unpackedSize":1725257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPCnkEa+DV7ApoWoZLGuV12jAFtoQzFEGHmciZglebyAiB0vi0Tbyms426Iq7JZ8Bx5zQiT2yOBI90LOOPoO6e5xg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWn2DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqEQ/+KfPlSG1dx05gzt3zEaCvwATHwVi4VKQrEzLOTdCM9Jzjt7PD\r\nnblIuMqDb32jkL1UdhS2umUMETDcAG9HWmBrU+kaOLFVK6GFCuyeK7yXuh6y\r\nDhiOBpZtcaUvl9JYOVRxpGF1Q+n9CJ7ZgJgVW3nV+qCcIJyDcBs9p4aj3I93\r\nmGGTmXOR+Oti+sJ16eg5a8wgC25z7FtusNNGAmbWEC7LVA3Um0/rBaNH43lo\r\ncva9yMugmKBQK+BaxMbXc89b4+zGlAFBHNpTmFXo5bPvCNAJcmkTQ/9jZsEh\r\n1cxi502PAnbrFNZHKS/GwKPlu/DDDgPGg1rJofSYcec0TJ6C1mwZ72a86H4I\r\n69njtJ5H0Y+d5F+bkAZs1QXjD+AGZXWNrsSOOf8nIUy+EP1+BIAT1l0m6gaL\r\nDz6JTwfQQv3MjUw6qEv/ttTiOWXiDIX4feqLO8bJD6sm+M4FigpLPVZeb714\r\nDpOozUWknLUDexp61yRyR2J1z4XFNwZcEZ+BQntd91QFLdaVk3Ilw5jo3oIl\r\nELL3ECEYpiLpmmdtiv+JWg3QRN4gbzxMKcI6CLq+whwGH+Buh/ou2/yZCZzS\r\nUxFsvqw5Qm3KEsBJ0mBKXCAakqCTBXVoJTqAHx092ERncM/+CjOGFEtVeKRM\r\nuetPmQ2PKcqxRdorcJx0mucN85ZjSlFDw/Y=\r\n=BgPA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204160405.0_1650097539053_0.4665251141513025"},"_hasShrinkwrap":false},"1.2204182206.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204182206.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204182206.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"83e7c80d7406923369ada8c1a7a5dc660ebdcad6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204182206.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-byosBrvG1Rb0srteeMwBOPNbnpacNTGMF034LtoQVgyEpT+xPTFf0WZeh9W6TxrlT6K02XM1nC2KtPNtjFIprA==","shasum":"3352521b92e8f74016f3fb4bd56a1d8ab1288b40","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204182206.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/obeWrZArfacw51spp4+wRz7Qp7OjK6mPqWfjZCcAngIhAMryW9CSvUC6om9K21WgPvRBtsbhXbhzP9gqBVdTXjPZ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXnNjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Pw/9GqNvx5wFYiPRUycDWDeWwHp57TOrGl25CQ3GZAqxwA0qp/dN\r\neyAa6v9FDnmGkjiRTHUw6/Z5gE+XS2mf8w0ucbB5/kEMPsnruFB3V+QBTkTf\r\nADc7UtB2digmvnkUUsGdFVbhoHCaut29w3mbDHXmeSixW5XKxw5qLQcd9faO\r\n73fx1Rv4ZOvuVCJ3mCv8gdBfR+FXpEov9cbpj6iI83dZqrN82cn8kiNQF3Sd\r\nUzOjsnUVIAVYo3UbdMO570lqgyFnh85xknjCjrPjBTBJdF3XDNOYaAaGWUNM\r\nG34Eyuv6pzd4/iHU4mxj/0g0h8odZQdd1LE0U0rQhQnKPwyMeErrWpcKJODF\r\nw/WqDFFP2CypzLj6Q0Z7LNpcWntWHVL48AXDUQ8SFFOFX99F9+c4btE51goK\r\nsXoYdJLsNBFmUfH9pL1iTUL8ql72ipcvauGkBWbSEJEDGDEVLtGYGb3RSAWG\r\n81kg1ryQozFfW4jhjJIBneDu+1q9Gue7SCNQhsDHRVNDZ0TItsP7oslRLe2R\r\nQlrebgwoaPr+BpPll9fYVr4ePARTAnEb12WeHdBTy8hfW0WvoQVCLfghkJdy\r\nmYcIbaEpDiaiSK+bYQE+yJ7yLQMM3HVFv9LOc2fJ5lOExoBBOP719F96GczC\r\nC7NV8TaZP0oS7X1NMfJ3KHCNUzwfQtTGbws=\r\n=ryc9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204182206.0_1650357090776_0.9704732475615434"},"_hasShrinkwrap":false},"1.2204191429.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204191429.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204191429.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"2ef2d96efb4624b0ef0313b60134c9e35a4e8429","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204191429.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-/kVuYr4rp4fzEW394Jpz57++TpXl8bM0rfnWldGpqT20sBZ9jionyZ8EU5fd43riCIAbgaNSktpiVW+zTxjM2g==","shasum":"3d064b2eff88cec5a3453c9088cb98e9172b6f6c","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204191429.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxJADI/JkyGcXhgR9XxgZDk0HhX19ZJjfhEV49nO52/QIhAKHT4bRlcRskvf/asgG9CHKWkIsZ0kFBysDXMbOiYMI1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX8VGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolzw//Zcr+GETti7ba06YDle4+5ERuIcfQlWHxj/9zx3+gDI0WzNZ8\r\nMSDXcClOVVw8pMds8gHF0hOrJu4yjDA/dgFC4lOPDji6DBqNB9nHghNX/rle\r\nIomOmfRPGu5KeRSfhYm5xhmBXBYwylsra1QziUTgC9R4v3/fr6oBGziN2Qjj\r\nixy9uZrz9N4/4l68Jt+UpqQ4sQp6HDWuz+cgNQcC9e+Uxl3Ddid2AimZnGRZ\r\nKKjzvXCkNHb9tSlNNgomJeyza8i/72jAL+rqHsIkWo/4XzKptqFp9S8Cwxvr\r\nqRAj7Q4yPm6nvuy9pjKdrsLzChmaaBtABYxoXgSEc8FlHx/kjM3QoczcdKX2\r\n4fcZM0hBVsjsTG2V0MTotSem2v5b7cD75XuqTeuRzTT6jWIANOmrkVx4cBXE\r\nRRdDe2TKt4p/wTwe9aQdJUX4qNMfMlJiPISDtED4mWhFn7+/4ayITXZNQYNG\r\nLVP4j8l7GNfvOysDPfzyBxMKk6gHi683UuSOYO5NVN2tI8qNLqRANHFDLwJp\r\nm4NDbhtl+n31sFHW/cSAuGnfjHHvIVd0OWkZM953vllBdtk2Qc6A+tYwoQuO\r\nshk/Yah8Yz6BNiaAUdkzfy+6jLEqDK/joWkw2KhSL1274xlEfdmJtx/apTdZ\r\nfLAPOu2d3x/Mhjdcz6oaouuMjB/SMkjRufo=\r\n=co5k\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204191429.0_1650443590138_0.7832442435703624"},"_hasShrinkwrap":false},"1.2204211736.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204211736.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204211736.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"01dad70364e4b2b9707441c2c8ec973e1547b195","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204211736.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-XRNYT9ln0HuyQMk6piaZMqYH3dZJSqTOWrgLi7W8ZMjD/gaePKazL+QLcT/D/u8RmUxmV4Us5rNwkrDWz4uABg==","shasum":"4cad39432f07a65ec85ee361754835762a63a87f","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204211736.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqw9Sj5sBgBXNbu0xfrP1TrAZw3u2OB7dpmv2P6DamngIhAJbNmaP9dCUBRFdBNMnPYsKDKvwk209a0Wu+HaZ5ku/x"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYmb1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlpw//WzVBld/TShGyzP5DEUXK13myy+5vv657o4HYO2tsmX9GghdK\r\nYue8Y05hQ7eaVAYmx3KtyzUHPunPrH9j1wIUYBkHQEkPzJb8SoUC+v2lk1wg\r\nAcaokphzCgijADzi1tcEO/NPVLFkKtM4cX/4czhwj4MCPUZTWJkzllIOcAYc\r\n3MtWh2yGVCGKk0sb78akMpCRTh2z9T8eaKiFUM2dSzPUpDHHFdn6BQSOsggc\r\n5YDRM9EGx/7z2SK634i7ZEUnyrqHDenZpm8AoLenEaKKG6iut7rgXghWOYwR\r\np+T8Zv2bRofo/30fzJ1XNF3vfixg1uTTLlg31JqR3osVBG54XsOK9V0+lVlQ\r\nMZ8eDjGvkn0WO7nAFkg4H9rR9AQhOEjnENpHkrTxtNKNzwz+uo5Y38rLE6bQ\r\nOWrazOrSw9BPvFhs1gc2+EsskWEDRVRuUJECZ3Bn8x0+GVmNyBon1CaWq318\r\n61rqEdj3r9LlTGj8xSKHzj8uK7JKoiKb/5EY/qZRG8SGuWIyc8YV7u0/bMLn\r\nAZ7Zmeg7858DyJx6zDvEoCg3aP9eFDKhVfLyRlC3YO2W6A0065Q+Qn3LGe1H\r\n/45hDkiTs3Z0f2wdreuDrIbhhdfm+HgtnqQCdy3rBDe/SafiQDFuASe8ANE1\r\nCJ52MTfzJv/mvIaDJOvCLI90hlFBTAn0qzk=\r\n=tR6T\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204211736.0_1650616052987_0.9932447198286223"},"_hasShrinkwrap":false},"1.2204221712.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204221712.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204221712.0"},"gitHead":"fd84f283465064f90218f67c2964f8c0ecc248fe","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204221712.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-DWXBxsK8exba57Ydww/UyLGJiHMr0+rgvUKi63FzhJii3DE6aMf6I8WeMiBsGBfqSVwj5/ZGzEg2+ikXf3lX0w==","shasum":"495a528b0cfe1197636aaff0f2f283e2407527f1","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204221712.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5BEPecFI+f94oXMTL10p7qmkfRjNEM+KGX8vRW1rfAAiAj/AKaB08vQKrnclFzh/mGqPCHkFun6i0geoDEEbne0w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZqnrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMUg/8CKA5mFA49Yep+tlf0fwhHMyIkOVZUTJopsR3OkJM6uFHIck7\r\nch3CYbL1gu1S35OeEhifBjRBF3AHIvhiSScQT4HKTBQgxhAdfyNvy2oMhDrA\r\nuRo6yH1p2MSw5SgVz9Je1kbVfMzNAPsaJWRtp0qIrKxKWZLCfszsZFgBTp+e\r\nn4Yi8LmlsVpPNzk1d79HBUdA/WqWFSgIDNstl1FOA6cWs7EWlyUZ1nvJoizB\r\nuJoSiphbN5Cg1Jv8/CQy/3wepgyTwjYtucJxdNVc7184FsJ8LXNrCriC47Yv\r\n12FIvWq6uxuNaRz71YHshpzCkNhLAXVK7oZ+5yFGkDEZNWA/gpIvk4T9qc/y\r\nSH9at8brPOGXLAqTDpNY/3osqWv/jWovceKo5LrtpXpY7TZMGAdOt1e+5GHL\r\nCkN1WnE9+fQg314FN9quNi99H5v5duu7w4F2S4Qs0NQpECYJzAVFXkQzHmvN\r\n319mpso4rGweB8O9VKO69rDDmLtkPXeisYqNrXVlSvBcwP/SkGBrdxzomyf7\r\n9ZPB8dsFcfyO5ZstYiFlh+V96oklPjjOYiCdNEm8ymK2fdqS/Tq0gDYYBs1h\r\nfpxY3Qzx/qW4hh/Sufaasnq/my2mfIxyuBySBbEVfQGuFTULgnlpgcuR4KYI\r\n/0bEiJOBVSiqMx7ayk1aXEJywpi7+zSLhDY=\r\n=I2O1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204221712.0_1650895339281_0.3247083363147083"},"_hasShrinkwrap":false},"1.2204252045.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204252045.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204252045.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"9dcb73514b52c635b732b72b56561ac680ea344e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204252045.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-lFcbi/wG1udP/U/WYoeve+6eWLVm+8c1rOabKF1pGPoQwAsw9Eb4s5uE9l2tRuT74KFEFAuYZXwT2mnFhg3FVQ==","shasum":"52ed724990f2bc8a39ed85956f77694b4a25f151","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204252045.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGimXHZquh1ojgaAiBk3qRXZvArTKbBlLi9ZPVEez9ShAiAk6z81cPHRH9O7Rfcn8M6LjHTQIoCXnf/+0mBgT7i+Mw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ647ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos7BAAn9wB+FojrLgDsNtnhtg1BDeAfJvx0wbSKmHP/Tqcx8gywmUo\r\nAG5J1Do4pwlqZYC8dTIJ1GfvjqGHiIfOSBdrgFKASWYEQyfuvhV3NllqxMYj\r\n94s7mOqs7VHM+qdUhI0eN3O0bszppqmt+GNLpnL2HNHdneE/uc/wz6Dc64Qw\r\nHxUHE4FlApnSqu9ogCNqcobLouTJ48Yuc5QMN3Q/bTfjkcKj1rr41BMk7teh\r\nLVCsOXddkdK94g3/giSwbL4VaWZ4nW9lp5iHCEfEAtQoLlXzUuhHrzm38KsB\r\nB33guSXv7A/VhOomQkhtLqauZJfvcyHVJR2fkXmowTPVniRH2DMheDKOJk2w\r\nrf3UQEpHJeecChDddyf/v/mtm63oqMgysv4cmweugvf93DBLVXR5uX7tXhiW\r\nA8jqVJAW5iGpOpjyrRMho+2sOrDNuMtV+22ydxU8t7k2PZyW83R3ynGfYrz/\r\nzC1g9cX9zffgBm2/dKQbldyf8PV53pkyy3g8hdhHrvCu91fpcsYwAc9csSnc\r\nRtSTb4ZXGoPmiCSpaZQJNgEiKwR4lPZxe0nmm9sXu/yYhZj23f4YWMTwEbLE\r\nNFfEF3FpLWPJUI2J2303iQuZ0LSuo/Bx02mmKyDl7UuKQQWvcWwHMzJapFLI\r\nnYn/u9AFaOuKw4XwkpyM4z4VRXHPiOftIIA=\r\n=nJv6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204252045.0_1650961979499_0.9858046757492811"},"_hasShrinkwrap":false},"1.2204272205.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204272205.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204272205.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"c2397d28837191a7d145806840ca6ca9a73823d4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204272205.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-7fD4k1xitSjE18+6pyx1DeE7Vm5moGgK4J/pd90P3FTymNwNum7myVqUQ1qGaIbdbSd9nt5n6FxkojL2bwSqYQ==","shasum":"64dd32f28fed7ef607f90e6921385129c0bbfa18","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204272205.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2rpUjVN2nJwISTadqwmxGL5nS8tEfkayDYC74Es0lAgIgBoE5YXdSft3qGVb3XUfPWkThn3+RFyD8BrdBtZA9Tfs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJialFBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobnw/+Mve6Lt/aXWrHviCUIPSD6P1fxZgdz4KYNUdenHDpsI9TW+x4\r\nfQbjmyHZRa6a0wBX+9W/vcwA/amSEt1nBrhE/WbEbxM1Lixced6tFIancOKd\r\nS2anV9d3m/7YN5ca2wr6pj5wR6QnOEq6y2wuy1k6on5LbMwtY/TGKz/NhPPB\r\nO3mw0+54QPERVB27bq/Wl+dY/utGD8u05Q2G0vxoVFxcr0gQvbKQc80rZ7R2\r\nIjYZ+A5ZNm5MD2KAm3OiLZMJE/c+LUZKCh/9t/a9mTWo33umKY2zMBSpNN8F\r\nKcMMLwBBQFNLE4BPnAPldqpDhMmpdJzXoz38EZdEsfFlFRRRHiyX/teZAXFg\r\nOtC2yh7bscfQl0cgBjiMyFDTbIqhwJ6K+38LhPHXil2NU71hbcjtZ0wjfzkd\r\nvvFL2X+0Sthg9zchdcUpVAdCcQ5SX+jNo0YfXt7VYRh3DKsiism5wWqbTcRY\r\ne79Qp9N4nW9WunnX6bUbDrhPiYr/YlhqU6BBL9jENUR9RIN77CH1sIfSUi2o\r\nkDXTo4h0hFdWp9bXigWkuKcsqhF0QrZwHZRtEGbgnmbcQFiuGGIsZVJUEhEF\r\ngUvRTzZvd0k+x5/mSdsApcQG1DZgp19JniGf/nPCIfi4brr17VwBCLKj3Bxt\r\ndtws0+2w/R8ttnlMoAMzkbrsoa9pttGAWgk=\r\n=pVpm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204272205.0_1651134784979_0.30857076538536576"},"_hasShrinkwrap":false},"1.2204281949.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204281949.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204281949.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"8bd4749759e81fea16cc216637d7a185eea3402e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204281949.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-qTk6VuyBr4waVM6/t6Yjft/LuRIUc/DOm1fZ0j1aKlhcKyksr5p8hm6YBFBRY9zMN2WbGatrXuBMisgulENJXw==","shasum":"95e9a723eacb192772b125506a1b832db1903411","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204281949.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAafFZcRZytuvtPYpsbHeTyi0nlh+Ay57BEaEjafCovAIhAM0B4AS00jfrYPyG/obcqx2bpY+fJ0gz1v5LBeLNEqKJ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia6G/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLLw//QSda10DTZ03Nb42U7VZm5q17SCIYWwx9rvjyYli8Mp7WEIlK\r\n6I6UwPO7SkEyEV4o5h7RxPxcbwlgkDcO/ximjHTky6FYt9hs4CgGvSWwUXAs\r\nFDoumQyH5aqMyJvLNZoh7RXzfUzd2Fq/bHi8Irg6Z238D3eLNE7cvdPFPriC\r\nU+FUzEIY6bJee0WW1wNBfhPgi1M45O+XF95bNovCCUNK+4bqEGPG+0SY2gUF\r\nBMHaVo3c6P01JrXCJz/DCpGppXEh7oRT5UMC9zuxzq9mH3b4kDgFMeEgdarZ\r\nwMoxrEVV09IUhoz4U3ZiV26c1LvukxLObMqt+fX9aVqYgWJIGmtD4aN4bp8o\r\nJ+E/w08Bzv7xCfRR5f+0OrbZGfUz0N1xC8MOqPtUzXR9oWnKbWlJ1AxAVruP\r\nMtM4srTw3pEJipR6qBvmt/JVOzyWhXX3J/YMagcTInJROQbQ/SRQm3lqileQ\r\nPf0aBRoS8EhEddMKMKZfHsRTCV0jOGpHzPVBcHwnJJotrifyIPjGeQsGH2Se\r\n1yEafvgMZbiPInNrasHPVmwuRm+VH6hHXi+vqxl0ck4j4mtLc09omPsPfi9c\r\nXMMUAxqlmayD5IKL9+bE+7Dfwp++iODJ0IowMmhLZtUHmrAfnxZoRPaaNlV9\r\nnlVa9QbQ80caIAt2wFo088NDqz3Oa6jcrDc=\r\n=qXCu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204281949.0_1651220927305_0.9839354773060323"},"_hasShrinkwrap":false},"1.2204292129.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2204292129.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204292129.0"},"gitHead":"266c274e2aa669399dede55e9fc55b8917069279","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2204292129.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-j1c18rP6IGLXigOhxosMHs+OqTQAJ1edCEfcqFYv0JxvIEAvH9/uJ8JRf4PyM14JbL1F2APMABDm+ea8dfrJug==","shasum":"7d5ed2152264fb9b970fe7f2d7c7b4e68bba52d9","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2204292129.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFK0UyczA1tbv8y3DdbsANFK3YHAX11vWp88PYDRz+QHAiEAgUgfm1QKryjKket4x4QncfysmqRXly95par13PvM2XU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibPLYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB7g/+PWQAwJEOI5uE2mcjYu+y1f2Yqpb5SzYMUBVTLdaIz1EwKlBB\r\n+eFi36g7hVQrYKbhjtJua7fI9DLg7Pg8HGwhcJiNFgBUCZy3pLOqvFUWAIQs\r\nQSLqsvxMyLpElQtU52wzcxkBuJKF8LlFDez0f6OZy9F91Qy9UaZdnKx1O4ZJ\r\nQqni+fennfc5filAyI9FmxNSOOyqb9/CXKkcm9V6LVV7CCs9bin2WXK8VN0n\r\nXmeJXmr57x2YufZG4vYLrwy+B1uArTIye9X+2RRGCCTiFymOB6dOKF07NDS+\r\nP2ReWzRvyu75Q2ZbUK2/uXiZIcgvhpPb3ZP4d4qFiP04kv3zoILOGJBAEwSN\r\nJ242DnJEqTBWCIl++LN8Goi9IGyfmAiwx81VjGU1JlG+ibsJnLYEfVMjUE60\r\nAAMoyHU1hpfy2ooLEls34yvbvHvS1lvNM5/7v83ChFMQA7YMHfHG7w/drRhk\r\nfM1UDovXmzfVAlZxJDp646CU1sq5q57bKDCdVhBDjpbkuCWmTDttGZauYyPb\r\nZhmmnSLCXj9jsoIryAvz4pPc8gRP05qV9ACUsv7J4czPywP2248m0busRJsF\r\nqPeRi9Sk4ETBWQtl6C0YWpaanvvw4UvIXplDx+zr96UQhs37X22KECoT7Mqt\r\n0i/UHEKVhJaAla5EGdKFMeILfWZi+ofd/Tc=\r\n=oI73\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2204292129.0_1651307224693_0.6575266304254066"},"_hasShrinkwrap":false},"1.2205031420.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205031420.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205031420.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"d3652194dae7f17865db127c7135ec194907b7fb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205031420.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-VlMuZN7cRBHx0oAYSqjj+u+d8ItvD8CWfBKmOA5X10zxU8wRFKLQahKsAzyRxY2Pqo5yiOt/qqVXxxnZaGrflw==","shasum":"bc8f3c1c9ee9566f56619b1b62a4cc34a05c3436","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205031420.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj+R1kNQDDpk+bHfSJZI9VE1uTtsmFEkOM8bf0klS49QIgQWJCO8vnAgkPQQrWkIDwxorbev4Shf0eq320ZhFef1g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicjj/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4iQ//a6PKpwbFp/AGMdFUJ3hyF30QZ/HwesMI+eK6uAC4UZ7Y57/k\r\nTiwvz6yaCsdLMwnIKDAOv91LbX2/wCsGoZtLlF1UkUxG5VBvS2SmsRSW8gqM\r\njH1cNThvP5qgvQdjrUYWZWxs9Eek0/0IplLM9xOyKht7T7c1yxh48zYlWLbE\r\nhaBQBgb/efEqrSHwNTdgQRr5o/AfdivvoiSXwodHnv1k5StNaYPI1i788cCW\r\nB3a1DhpbOHsontck7iBWWYSwUw+rcVPdPEepQc9+HJQz3TJV/UUKxVtBb3+r\r\nJddKdjZHj1L+9JuBvDRX/1ssIIJtxooTLfyJsXs6LfUx0ZpYiUlNopo1GRrt\r\nVtUAmLfcqT9fRwp3c/U97vYzd8A+/M47JWkLUKJpkDf8Qkwj42roxR+mT+lI\r\n1KOFc+noRjvUmr0ZzHyKJV61pOQ7dtA/i2tOKzyFP5TOOLmx6q+RHcqq7bWJ\r\nh1oj48+xuIZj7pQqp83NSijzrAoJfB9j2eM0AKDrUPUpg5NjZZY/T5NksJ/X\r\n83BpSB9hauiUrQv1g1k4hW4ZrbQcrAzAZy5+sOQKWdM8ZRYiDT+XfW9EjTbF\r\nhRK4d6jH5UImYuWS8KiRSPlWVGa3Xbub2LFQSzeHg8hyL9LPvzE/hIvEmcXv\r\nFC+6a0HmLYycFeKc94h0QXT5VRmQNlGuRKY=\r\n=z7rD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205031420.0_1651652863557_0.4210372987191171"},"_hasShrinkwrap":false},"1.2205041533.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205041533.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205041533.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"8c9c66c7b1ace99b28d77b82807f84e9e8cb305b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205041533.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-C/KQYRCzpS7SC05j6Kg/wNUWYBbMJ5iHHqcu6RO4ZhusVP9/214tUz3ppWifhX6AY3O56L7c12G6a7KtNY3xLA==","shasum":"00e119f2ccf548cf0e014df69922595398c5ed8f","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205041533.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLUdNnIk/EAkYyzn6Os8Xe1DPt9YDML2WnFLn967FiXQIhANde41b4WBXNnK5m1O9X78MJMD5vNx1iVK3m12hX26e1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4qMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7tw/+Oz2wipS/YbHDnpsNu/T9ETY4E7cbyLjiDgXFpuEu5LlIx/yx\r\nL0gyY4W7+0Zf1tHp0QyEgSscIbHeI8D6DVD51P0UozYpJ7Y2xXkGbJUNYguQ\r\n9STrc5mIcaCnEzW+f/gwzUMDriS6pcLeDtxZRAXkNAr5K6LsktnLZgQyDL87\r\ntEkrkuiTWbUzVYUoqekhVIgd5tBklLbBWj99bBsM2Krp67l6Ppq6OS9r5pAV\r\nXfNxHJJiqJfqdKacSxyhBicW7KsSlTWz+JIqJvpzFUZ7xu25S88Umz4Bj9wh\r\nOL/wvUwSpLJiVLS7VqTtQKPPBQ6fEFneVm6MBlGNN+Kb84W3I3efy1OdeVC5\r\nLMSomlTgSQk6KpbLRwJtwyhEI2WvBAZAbzek8xAQDnm5nUusJ1ccJjtdHpCh\r\nXtanC5nnBikSmrDa2e3Wd5tqhzYJrehSu2AdjVMSjbUqOhs9NQi70RM+ufvZ\r\nPwVhMJuAD00lq1sjVElbMRtaxgTew+KF8F7Qa6ECph9d4pBcA5fTeW4ZJGlC\r\nd+qm4ZuKVPo1Gg5DyWMPeX0kVZjNat1yeM0XkzUmdRh//XT7knmDlk0xDJUy\r\nf2mWijbffWox08m3zmc7T8IcCI5D5Dwy4EqhnTp/qmo2UGNq5p74hlVPCu3b\r\nl0uC9+0NXgjca9cIzLNWJPvH1RXh9Lb0wa4=\r\n=+4H0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205041533.0_1651739276165_0.8792017647022168"},"_hasShrinkwrap":false},"1.2205051832.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205051832.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205051832.0"},"gitHead":"3658b8bf865c7e71c605f93088560c0657af9cb4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205051832.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-6NFUtskPtkJs3AU14dZ/9jDKmRjAfZOMilK0raYnUR3YTVBtP+WeIc2kOc5FZbq33LEiNE+mtXfIvEmOcFrbKw==","shasum":"c13378b2373cbb7670b684ad668d0377b3e26977","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205051832.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyr+v25Z2wdUAOpGfbR/gYF1XjbfIPBeZFfOSJ20yuxAiEAnCCAIfQugCyA0GhqvJgXvAD3oxn65jG0SwKYTpiUxfI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidNv7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLDQ//ZW/Ow3MCaXuMGTbEOFowa/rk2hQ+XzAAeKPQz4WMFbzQGioV\r\nEBWeT0HqMxnbrLXQWoavA4dky+M57ST6Hstf+ZhVqW5yKgR0of9X70KxMHwp\r\nUlEkmztiduwm8e9Vy5hTlv2z2pRBV+aHsRkkDfVtNbpgrjbK849P9KQzNTFp\r\nl0uSPxGFDwLH66sgLpBHs/EJ14QG1mhG/v5UPpc+ik7P1CKWojrZq/f9tfwg\r\n+hoRKBdVifee1CwIVXYaruLUrkz7gRYCiRLK2XVhidaniEY6Lew2aOhtNvF5\r\ntfQO3IDvD3sHRxNQGVKX+nlg9dzJlB9eUK+w5vc25m6thEbRcvQS8hnx3uF6\r\nvdv7Zjbgn5VghQLZsJQLoaixJ685YsI1ylsRMo8W8EOXQcVngZmbyJIbSDm6\r\n9mxw4d+oE5AHuMRo+ZdnLGoji1toBfDmf0I6wz758wHmkHI9gUjtVD6YbSs1\r\nmjGveR7d9QfgD4f9nFcpMo8p9Ztt4MksxmJeeWSpZJDDSJ/wg0Fm0gCpE6s3\r\n64OaastcxZ0rciVILJ5H3pJ1sgp2ZaoAUoIAwO7/Z4KEr6LmX4MLO6gI90yk\r\nai69N3ah2Ty2MHud43dArazDgKBxUejJcgjg7fnqlx7V+Ti1gNybTFYvzdpi\r\noEP5F/0caPbDL/kDjYIEHuPFluR6y9oQvXQ=\r\n=pnqm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205051832.0_1651825659470_0.8012134242217974"},"_hasShrinkwrap":false},"1.2205090810.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205090810.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205090810.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"3fe2ae4108e8ce4355c90640458d13cf81af160c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205090810.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-7rx3H3hGxYZOgTEkcZ+Fjrs/yvoqR1sn5x+qVZ2f5hX/vw+LL8fikBJEahNMUrQDsCOUuI3jRyhTwzaLI6p3lA==","shasum":"af38b5b786ffe49296e2d5e9a77df6898fca07a7","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205090810.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuDda8st6K6gMAT5HPkuZAGqSpoSMS72v2xSo+pG55rAiB7O/yHPjUkoa6ZJ8JBJb0iz6e3UDPtcPyauH0KkiDpoA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieiNgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAkQ//Yp5CH2UFFZzsZOjLy5q1rJQ4ZV5gbxCBrNTNvpLnhoO8E0oh\r\nJuNYjLYMGX+wuAgijqdW/X49Yf8OxQB5vZdk9J5dqznA9GfWMyqDdqZojD/3\r\nbOkZvwekLO1elTuMkMLUuP1quQDfkNCoqgruai4d7Kgab1swzUiD91f1cvYa\r\nxW5DAdmz3/YZVaadmb3rdbO9Ony6VbEjYDEFNFDs1NYERN4UJ8XxOItR/h9n\r\nfu9nnvJFMraYOJnel+nbsgYr6/axemGn0+lK42wSaIOSeyOQRkX5LS+b0f4x\r\nPJPGzGCVEOHObGEjb6vHbeYVfP+rp3EkecsmcVlbEpEC+Y8uQDwuz52s/6xb\r\nSbLh1s/0QLGJtxDJkuQNxiczVge2/a33tNzbuImJQfuBijREK5hC5WM4XxOc\r\nCzQtRWApyhGJ2y4JMSfFUfmSjBwF/10NziDoMPJJMDr+wB+M3o4WB/MKuMQ6\r\nPtjlifPNt5P5xL+CDyMxY5BQQOpgAPBNmtsH5YT7au+LMo5Bmb4f4t24+NA4\r\nSsvIMVwXkPASDsKaSUYvJZaw4px4cU3R78ZZt3aGswPXD33ZH/IPcgvo6LsF\r\nDdpqM+Yikom/pcb3aTVWZuq/POAjfDvd9hnSxA6QBA1lXgBZqr49MrHvVuol\r\nAoI/97xfjGpYIFpd3xHXhVtoBce6ctOi9PQ=\r\n=uwt7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205090810.0_1652171616612_0.23164987770815326"},"_hasShrinkwrap":false},"1.2205101904.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205101904.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205101904.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"43d879755f765aee2d0eab657533b493a025713f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205101904.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-YqzYQ5Rw3HEBXkdDvZs2+58QohjpChZSyM072njwm76JfvSfkT0d5Hh7od9IyF96s+cU3OoBnFEyY9I7PuQhxw==","shasum":"a5ae8367b3a129b00770eea868025b97d7f63c2d","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205101904.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJCPW9YNUHgPtfJfle7r0+AiVfNFAQKuZITRgychQvEAiAjbWbP3pmI/3mZ5vDzX7mMMTn+4ikuBrdGQbqo1fk8cQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie3TRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqspA//a2wyDxIzgc2ksZmFzYUWfz5C8IkqlSBzeQ8gXO85FyXzVH4T\r\nfq154C9cm69bw2FcTAwLirUGQtEJCrlbq+NkBv0QNLPDbonVC3xU8yHjsL/7\r\npCS+u4BFfwcJg+aWhpC+bJqpiP5poYa7wVjoEA1PfViQEvNyk1SEdlMF+PpW\r\nrMxgKmozRtRnaDS42fR8dLiEACIECdrBcAVn8aOY41gPFZ18uxQrbkKQslLo\r\nT6/QaxWlCqlNjp2J3A8XjcqN8avs2aw0VY+58ZXm7KnINAfm3A8ZXKjOgv5y\r\nE8T2aQ/CpK3ihVN5tTfdcEw/MpCrU4HdDz5vq1QTJBsZfYJBgwlM92Dt4fHZ\r\nWlCwO9rrFF51lsHsA7NIIbPh+Awkmkt6UnVuFqR+kyqwYmQACKXDlrsNHAzg\r\nxkjN5FM4Ap9qq4Rksmd8mYeCt8L8HgI4E8cbDH/85Gjre6NZV33VZGzfgkEJ\r\nxG5nMdu4d02VrBNSg7bHYCCCAV5DH5mIwqeqDwze0GeImQ7aFjqqXcrYnHVE\r\nePCUUkL6ysoEB+vxDFjJsHSFwOBTq+Lqx1fZniFDxtuEAierpz8hGWSrOwgm\r\nHgSmtYQcYQVafkphbpqSMY8rLztWJLfw1yeiPY1jzAmpNnIRE9nyZe2E7DNZ\r\nfd+huxKWSyczAh+BOAD7SZDB4bq/6cbuZzg=\r\n=AEQC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205101904.0_1652258000792_0.6245665854586735"},"_hasShrinkwrap":false},"1.2205120110.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205120110.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"46f34860b9f501caf0eda81977d1ae3aef4a947c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205120110.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-vMy8h5pSVdbFwAwpYPcKi13kBLM7LgejPnzRazLT+34szGk/8392R55BnaodcV5ec2kWfI7pLDitmpOiPxKQdA==","shasum":"635a187234c018251344b37c12a5442a9d1ef37c","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205120110.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFTyhfYUbd9CiSCXMCbzuFtWU870lTDTVqwHEf1JsrRKAiBZEsLmOu7IfpdQT1LitsEuX5y0E7JDeaOjLVI1ZABehA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifMYXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMfA/6AiYoN43/wIAu8ij0ya4M8cRQqWgvycKl72exA4PDRJtytHkf\r\n38/+SZnlwx3cdP8pk6qc7wLj7fd6EoAizQuSk2Qc9oxbel2A62RuiSUn2r5D\r\nSlppfKBbk9PHUOnRynJ2qsqpzEjKIpOnumzhTZvfvrMTJq7C6XLKriEHjeP/\r\nTXUL9+mP1RN5nTTvZJUnEVFBRux6ngZUzR0CpwlJwcNz1VJPZ1lMsFHbD8S1\r\nusSDzcKtsgamjug+7LQAU5Xcdx+KMaPMTozhZ2Afzuqxm1/k64OhvmJiYMer\r\n4zhF/BxK3uoGcR0n9LfRkrByDYYvcSr7P9svOwub0/JB3FiRFUhNsBcjHsHa\r\nuAfBR3GLHgnNaP5UXpDjH7VAfcno99Ca0tTUpy43ufFcUG/ppEfOlU2PedkR\r\nQPXhZ1rly9GCFbp4O1zUxBpUAbv7av1qqyFYfnBa1dOiAFmhmAJSlwIuGff6\r\n+ZJqMlUIcmbnBP5YmlPjAIqTN5tsip1+kZNyOgm29jvcpNzOdAmRGMeHwgpr\r\nLbLMCbBc6RX4VcFPCFrbufCj0BSaJmkRnbTIwdrZ57C9CVFu4u0fxJuk+BHT\r\nxgYtr2y7S0dnpPc+XyYnJJDY9bY+BZoEseGBJJHb7V2xsONg5k2PhlCOIeKd\r\nm6wKVmjyqbRg9S9yMesMNLPyMpocUmzzxE8=\r\n=nUge\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205120110.0_1652344343070_0.5877322530811211"},"_hasShrinkwrap":false},"1.2205161914.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205161914.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205161914.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"2fb4e151488ba4d856b33f836151d66b45ca457e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205161914.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-cdWQkm8qF8cwZ0LQReLYvEu9QOxKzUVOodtnF+NwvzcduaFxpvDhjb7wmg61zKjYPfp0nsG/KM51ezI5G1qFsw==","shasum":"e4d9c659e0b14df2c18bd8a68f3b7e727c501e4f","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205161914.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOpl95ujlIFCGnzV4r3IbhXDTyoCM6AfQKRq0wrWrFEwIhAOYVceLk60V8haIeGV3kTxlUx078qa6PanFSRqRscTNL"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1ykACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4pw/9FXQzCozxQCc2Hsi38oXpORhq+pnQEENI+6ky5RpcX09OVe0X\r\ncPbNw7MHVOOjknj5FPg0zrx14/7NPfEXLYKNWKO92ZFpaL504mixrGfyBpkG\r\nRHgMVfbk04H9wP4GnFC+3TVqdRXInLojZP6RPWRBlqzv2tfOJBx/crJ7Zftz\r\nnZHuhiFnC+y+edq80BEGoAGe6nIULiFymQRSrlt6TGZ9IZF+rJhJghl5mRxk\r\nCEKUcA5Hgfbf7+F1Cjifzda/3i9UeqmZ7o9mpEPsmCgTCNZ1U3WTn14Rz3Pf\r\nKBz5JLW4KwSP2In95TUnpXAbB2XnVPL+vGCo66D3y43+NaGJ+Q/VcBX46asr\r\nk2GSg2IaQeBT3c8/p81fNgBNO7C6DBRHhahYcVbnUsjJSs+KwN565435xA4Q\r\nMAHYCAV7ZunjHgDaLXmJJezKF9JJ3u2LfYpV5U4jbHhWM3NeU4ITvy/oHFQB\r\nO1GXIwg5VqFj2MJPeXUWfKirLlbov7obxMhEp/S5LaAb/PJ6fzTgtIs+HitK\r\nF9s1Ln9eViLuxKVIvVJ4CIptO1nijfHlZ6k2CShgWg9QYJgFoI+97NEK7ulU\r\nux3oI3pGfRGPc6eSR8ffMlZnaYunF8Af0rmRfSGTohACdCfmWdbVH0xq8spt\r\nTlDLJbHqDb0UeyVCYE8WtlM2x+OpCOYyTu0=\r\n=lo0L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205161914.0_1652776099962_0.9122564167106348"},"_hasShrinkwrap":false},"1.2205181800.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205181800.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205181800.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"fb3f61c46e2221f0f2e1dd836127cce386c7bbda","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205181800.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-PdoQ5J7g5b+rZ5vA4QkujCe5/Onl04PR8HsOLyfIz4mYUJIrgWJQX5OcL50+7bSSw9SnYMV6B89J6+3HoJEp7w==","shasum":"9fae8ed2238bd9e649cf45e561dbf29e6ab64785","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205181800.0.tgz","fileCount":31,"unpackedSize":1727374,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkV2qIvMvzyWhHkWKUJ0h90Hx3TjCuIbaKQB7fO8dMcAiBhyyUdxVSa+blXlDC8FWNzXncwxIXEa6BvCTpGWgFoFw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihf+xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXTQ//bDpObnMaydo61kq31a2v3rTGZEnCU/RUnVNiVUEBOUcb8+jO\r\nF7OvbtYS0NPHCCAVJQ8hWS2IPuGr295t10IiEzmegCldGinff4dqjXfhfc3y\r\nKLwRIqmfF+Mq3Vv/sswLMjiW7+1eSOsjA8fR/9AGy0hk2RNso0LBSGVCNivK\r\nK5nM4BD6qjlR5lg03H8/IczZjA6v8IiwF5b3DiPvgXGEdjsvyfmqILdZ47E0\r\nvSlo+Umcvia+IO8frB03WDxSXo/swhjxmt0htCopLNVguRFWW7arp3mNHKGs\r\nIcMI6zvMRNxl7GGjQtCgKyzWgn1IpvA0AfDcDqrCXWUk4FHo6QlNAZWvIt2s\r\np2Yr+1aFzR4qIkZi3yE2dJmmDzxPvsWvbRt1wagEJoDVEsueTr+zfC4iQOsk\r\nqiPm6hgAlhQKAnwuOEoRXOi5KGC1LUIAsE0tzRQWDUuUuPwf9MHNEbDN2lOe\r\n3/7OGGqBPb9akrA/5POYbuqYIBGSsEzhGEL1fur/cRmVL5Mo8nv6O9hrU+W2\r\nnAj4WArOg8jd6VB9yNMg6oWH95d0r8BM4++GZOjnxl0GS9OEBCeIW5QcgAgW\r\nx0kFFuYfpNAsr++8AsqQQR5efAQdOJYbEzmBEDJYMmS5WEt7xMrFItbIjRXF\r\nC4PI19SFOPjI5R8wFM2z+l2XbLqyxGIz2Zo=\r\n=tZqP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205181800.0_1652948912876_0.8444753590188288"},"_hasShrinkwrap":false},"1.2205191749.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205191749.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205191749.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"83c369066eb9c7dfccb12aea936f29a84bad30fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205191749.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-mxUhBc3xxxsMt/Ykj9BR20PWKulOKegVlfWvk/Ct+uC+pp1xGdbBOBVk7QoyHBe7rw/hBdvq00pr/NAZeEQK/g==","shasum":"b90b6a5722fdb5607d39a3fe94aab1803b249579","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205191749.0.tgz","fileCount":31,"unpackedSize":1728574,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjB/8YgJhuo1uldg+LKx1pt0/7x2a/4QSWLT6bCEQpbwIhAK5PBP8Ax+BPfLLIRhclClMfs79US8K3fuX3mgat6gZW"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih1EvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5AhAAoGcWMe6Lfb/mybMhYPFuV6M0Y1HhZ1mQ+7YlW8xJWZqEcJk7\r\nOHNNhKlI4GLNDQpWwgE9ub/G5MN8Ry+tKHeJS7crW+9ZyncGQtS4QIKvnQRI\r\n6W+nfTzev4LP1w2f0SoLqCqDTH5rJGvsNsC1HSG5a8O/ZIBdRaAZSTzo/RbU\r\n6/Z09KR66AMR/USZdaPWAr5xDHi6YFA0v2YKR1FbeUrAdnUU+CbHDTvF0OoV\r\nFJUqnDuTleMhXU0MxS336NgcY7NGBZ/++KSUOGO8rK/hoKw713lSipTcSTDA\r\n3w+x2b4Bj0MGNB99Ytv/dmBqhpHyojeneiL+d/a8FiNsQnfHIRi6t+EJyhI0\r\nI+GgSKYd4zUIcujeIaIVLEh+VS1F7jPOFt+oiKTG2aqtMh7kfrlST6kImSWV\r\ntONcWbZQ7vEIlkGWtyE1JV38HgPqnPM0CJLdX4nskFdoLKwpB1qaWT9nsZCv\r\nMGh5BVl3ezkrsAtOx9bg7bdmGEDgUn/deN6yLCJBXY2J4ekYRSqsMp68Jots\r\nVasMbmqcZeOtiFGUptpTSs2phl+sPoznP25Ac3tz0GeatxwS2e0Ac9sLLz88\r\n326pILKmsKIDjGSN+OpS0YuqOLusmfsup/EyUh16N4GEIpf1cdFtEiNV4FdU\r\nPlQl/IQXG1hmuhCINn/Kz/Srm6JbN9qYh58=\r\n=UZ3M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205191749.0_1653035311008_0.5226916977783211"},"_hasShrinkwrap":false},"1.2205232225.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205232225.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205232225.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205232225.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-RMl6Y1bnGRQBzsp/KM89THTmGjmb9dPUrm3P4pL/Ki1I7aPN0FSBrcttQa5j01r58rMvADyQg8UgA7o1lDOwBA==","shasum":"876f0ae42532c38f8de3e6dc0433842d36f63695","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205232225.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOuJCga1AgPyMM2w7+2DlJPHC492ks6T19TugDVG+g4QIhAKhiqSu555G6Lo/9idP6RZC4UXo8ad53cDIMQJQuhiHt"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJbxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqriQ/9Et6yY1p9wPAsOQXGZ2Wzz2GsCY2MPmPEeFLB7DIU0z3Bj9Km\r\ncEmlXWw02cFtUnBcs8GeLsd9Dn2trqAjDHsLNaOv0jzyonpti94W+lEtmNuv\r\nie1eGLNwsvUMD6oHmZsLDTFJ7FEPmF9m6X9KtaT1eaDCMasVq4Oz9Mr7HjGD\r\nqM9SpiPp0dVZEIi2vK38NMFOvTCdDoHP0hGQ3p4YE6ovR+dH3+dG0GvLd59g\r\nBfuCrz+KSrhmUUsSnpCK8yfzLjc7uF+UcbMxGFBkGwo3dhtaPJEJk2Ffm8ZN\r\nmMEXSdodbiGVKueV4qh8BsIzaV6PtbN74aFp7VjmfHufv2Ps1iiRPqhIHdjg\r\noccsWixRZxgwm27Om/ffVH8YP2QbelCjms6injk4IdWBYTWpQPLZ+30P3qwK\r\ndeUkV8zri7RJ+S0HyF/qOqN++W+IqZzy+lB17c2WFQGAHGSfdfXIkaLwzOr8\r\nqyzms1Yj2EeCsHnOry6KV1CVa7TGFX3ey9WtKjiCSIbELq3mzPcpw63twAu6\r\nMjwjXKG1o8pNoRyfVD7pPmi/BSJdSo2jk+ISWUtd/eo03MYGIzJZzLL5vY0E\r\nnpEE1+9d2uCQA9WZp8CbVGaoB8FYU/mLCZ4PAREhFMG/t76oy8cmRDLEKY3P\r\nAPFUzsCm0zTQQP5az+GZwppfvV5lY2KFHUw=\r\n=elQt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205232225.0_1653380849039_0.771718088991203"},"_hasShrinkwrap":false},"1.2205120110.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2205120110.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.1"},"gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205120110.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-seW90N5OjWwFLcr5EOpk/XzT1mtFK0Zl8zOKTaKXB6tYFKAOLs4VguLvBoZyv6xtyscXzT9vVBaf5kAfEGtX5Q==","shasum":"2f0e3dddcf2a69d67d0afc1581f75583f91fd3b9","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205120110.1.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRukB56ldJFKcjxFBEKVb1k90c0UyZtQMYgh2VhMb+MwIgFnsWMTCUyNTERs/Ft/VR99EOz2uspFh/HM4zMCwJVl0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijS6FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAtg/+Ikx1YucjYHWrhPd18Qjbl29bOlw1uHt4R8R+aIwqUsGHQUr2\r\nniC3LeHiHoiernEItkOLRcCt/CsKetq/XTJyWVFYkQrcL0xrzEsST0FOFC09\r\nOvttPtio8OUh7jpmqJDfSpbF7mPfHZqJzgNVf2VUH6s5sICTdqC0viIvofn/\r\na6QVHkvGGyBouELbziQ2c3xcfv41QHiLEPGJoodT2vOMiZtkFoGHs/By/Xbb\r\ndtmdjFhQlDzYcTDUT987rQtDVh/sUhcGcqe50uAgHmAXxB0/CiEUATvTicim\r\n+LmDr4E3a0Q1x24ucEVF0lL6xVN1sLVaEqSQYqH/okzoszCpx4ukec6PVd+4\r\nQgkzPlmJDqRMIHSFfjp1PE8CBp22FxP49Qd6Se+jqgNYXuPRS3/nET0BWZCY\r\nuxwGfgUKvPI2jjphkUTOis9aR8Vl/yHiNzZmvw38peQOXkxA5CPQ+HL/CUKE\r\nKs6WENFMkfYI5JRBJj76AIWd8bi7jxEj/LxpWYxa6plaNtIca8PwSeLY9idB\r\nBGx4MtSxs+Df0N9W7FwAN8v5Wka93Y3ATmTln5YyZoa9cBlORe7SzLEUIk30\r\njpMgHvHPFYoNLhItKfv4tX+ht5aeb6s3G+6m7M6dchNCsSJ37G/mKS5VXj1l\r\nNyxnZ+b8nPVHlWD0zJaIiC3cZJ2TDLbxtHM=\r\n=kW72\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205120110.1_1653419653238_0.06748979413140144"},"_hasShrinkwrap":false},"1.2205251942.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205251942.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205251942.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"e2f9546e2689785f0d9b4ba72e61759323c45bef","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205251942.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-VNKrmYK0swbDs1pQzRDf9f+ZEX87sMLohgLeW/3gNktwGhi1zsY0agl9S55yqz14NGkBhfjmFtAoVLJUsYwZgw==","shasum":"133ed449a5d7327a3e4a961cfa9bd3926b34aae1","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205251942.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfE8rTWaFAeQU5WDOzbbXpFY07q1fPzfsATlHa6VKJMAiBmU2NM6qtZhTJ48lWTSCuLUnXJf8D56i3UEHvbwIkDCw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijzoXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzNA/8D4T/Ov5JDJmCDMbtzyGQLdvMqqQUa91n40gaZtpYJt1SW5WZ\r\nvAM/orRuvmWzM8iTS8YmVSnVuz43rNP0Q2wKUivuiYOciorOAfV2bKxhQis/\r\n1XGUJj70sRXCSfNobguSkN073jIEZtes1qtR+IKnv/DHLtskPHj9M9CrbKzp\r\nMckFt9icNlnfk2c72ZD8EQ3QNFUxxo1//eRKB7dNzV9w+5qbgrEtGrjBncjf\r\nd97C/HTLkrK/NG/il22Umsv96Spz5A/CCtn5sUwx2Y10m9U2QRXreJjCJSy4\r\nn9aGWKipfjCoJjUEqmDyecYU+YHxN/lnGJBo4ZacmxRy+LY6T48Clr+3hwgs\r\ny0bBlzyWBxw3PTLfom+IqDQoymNqskOwWU/wrC9iuup09t2grfu2FbmIS+lv\r\nzYcpKiPduUErT7nEWlT8/ay+L63S/kluTGDq5JXxiaXglLZR6mgNxfFIf0jC\r\nsHoBA40ZwOQGbvyzLAVDADOULwtjiaPD6hhb5mBSZZP/MkOlBpBeigbh0RRo\r\npfik4TCym2YYcQwufhqAD6hz8PRAkNGA2V7X6Lyw28D2I0RPZkclWmHKXFaT\r\nAHLyNIWOpZ8gVWGZoC9ePoJRVlmbnsvUBrVGKWsciCjrXE4PORhAGbQTufa0\r\nNFXJVPJjqYkilrgVFIJcotaEjlv4OS3XKCo=\r\n=ZYix\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205251942.0_1653553687010_0.3257740769776467"},"_hasShrinkwrap":false},"1.2205270638.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2205270638.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205270638.0"},"gitHead":"11e6020f1ca745e65b5d80408e0beca2a8d38004","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205270638.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-uUeiRJU+sphzhKQOElQc3WoIRTji5gMR82HtwrX58rcbp/4UCUJV41G3fEvVbhvcxZhXrpD6OMZ3Ad4/gx5+7w==","shasum":"932c6b5cd38fddb98f3ab53a7e6e52e8937db9b7","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205270638.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG+Mg8dHq+TcI1cKcn362z84Pk5q2LtfqazJ1ck3A5cwIgUNgjkvwHp8J+i99ZfBALBtTmkgGTBFnXYMB10Y5YcJ8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikIt1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9TQ//QXe41L8Ky6xvX/nRYgGQqAy2d823dYDQJyoTTApcOPC9D2/L\r\nccFdDTmZOQTi1TlbHHfDlrvvr86qHMcqYMRxgQq28Gu0N7PUwk9Ty0YNJzIh\r\nGWBZEN5+qpkXZtUAWP6fmrhwXBO9rtWdWTeMPCUKpS1T/e/qlBmM2yrwSso/\r\nXU59vih8xps7KEB/u7yfhD5+NDGsmyP9PwnxX2lWQL93015umD0OZxB7r6+g\r\n3pDJ87r7iPJOIGQwUegxHt60u0C9asrEHnLtjU9t3qzadg7Z6PpMh8rPqPvu\r\nKE7F4lj2IwdnZ2y8M0tROSq3MD9cIRmmN2bWW8VftHVCq0DitGA5RMZoP2zK\r\n3aIbUIMtlHEtL92rGM53co8Xz6EiOwtT63K0fybRvCryZRzHgCOpz5VFdPaA\r\nPd96P0QllIWKLOft3rWE2p4jS+BaB1R/uJgLlYzLRxVIv7LT+qKb7hRy4rV9\r\nzF8xOasT5jpA9NZB0I4ZpYBeTKKDBpjiennRW3b8uUcBGFTq4Fj3Egk7+NwT\r\nKpKpx2Q/MFc2fe+G6QZPlLXCrvJ+bZnt3HJGleNlqorDi1WaYEXc47NIVJc5\r\nyjHPJ2I9QJ9LrsbxpZ5Kbc0vVPa0CIa4ySS8D+cCPuIRFVmzftJ77uOcKXXQ\r\naWs82MvxMPACdAF9QVXnRW5vaN4yPws+ChU=\r\n=+5dU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205270638.0_1653640053188_0.6329866209008677"},"_hasShrinkwrap":false},"1.2206071918.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2206071918.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"f200c815cb7bd0e1495bd9c338425aed1887a459","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2206071918.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-nmW0H9LvEtoKY/wBl4tZ+r+B0idOlz4iqeQyCTPps05ms2YeRP0/tmn6CYWsayTldH2lXDHL2Ujdt095PSOHkA==","shasum":"e4aa0adcfe2a1708cd39f2d4ddbe10be88c390dd","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2206071918.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMg1nmczQfK57W7wVLpJtUaQ4YPLfyqoPTM2v0hjGF5AIgQ78XcYkthWAp6iaYIuLk8vj9E4ewFU7vYhhO5p+btYE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin9ElACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo30A//QIsErnK9Phu7WKtlLYZiq2XrDhm/G7y1Q7UZx/ROTcTzR6H2\r\njMlzXNDw4/TsOGtsMts/Q9iuDRdVgir/uZa/F3VS1Tf95+kAy72dlLixPo08\r\nA7uv2Y8gYN+yU75Znn7//3WSG9uPdZKTJ7+JFegdL7jdYIQ6pLUXg8MFni9i\r\nzGS42zp0NyGGy2wJIgkg2c5IvEqFUnVTRP/PkwPf1nJ78oriX0Jn/K8uhUt+\r\n9BwRo8B45Em3ob16xARgDZB8T9YBiWlz4TbtXkqwIFAB3euN0u18l9v/k0ds\r\nDXR3B72m+owyyVx478Qjgdv93aPh6CZ9Z18HVuedMuHU/eG9bZWlGoXMUO+I\r\nFjQNSrYOgBdlH+aI1JLcbYnHQPSNhGwZ4TY51fz7KANnXWEKdPCfJxhoHrJt\r\nVgsZTE3Ui0L1MXMXli34x++ZYYK9zKK232gXXvMc6GXxWAxW+jNtoOcAiuJD\r\nKrtsA6HRaIxp+cQhUOzb+54c7Z7UOqiyx15TGnIwS0tP4t4VMMDfua8gqZYS\r\nc4f/tXj2EGWD8d2BMxQAYPaEtJrU4pdjO6+GkGMivEico6U0idi+ET1mRIS0\r\n1gKa/esdVS6Y4GOnW/RqrNRKZTTM2JE7C2q4s5oa7E1fPoKAI/kc2vyUNPPH\r\ncYMaIPxFzOViSp+KD3URNpgwi4aV7iqpq9Y=\r\n=1vAw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2206071918.0_1654640933221_0.5902667557810048"},"_hasShrinkwrap":false},"1.2206072228.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2206072228.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206072228.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"9cfa89fc95b4eedfeb00b4eec539909f0b0c0f6e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2206072228.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-sRuzr2VxTySZIClOpwCCmLyBjQ2OMJy8A3keE/H7SteQ/RH7bTIeF5B0i1fG/C43m97pToFa3FLfYeAZMUSR3A==","shasum":"ba05126704bb67b3b2c422bf95263fa8b5032c06","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2206072228.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuYpjy/1V15d5VZbvNhwG772RZCinJUWtFS2ElTwXgMgIgKBn+FkgtWxazobRcZVEXHxgRVlv0FiH6bnT7I18tN/I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioF2pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf1w/+Pdrooxf5Lrf6/EpoZYqNk0QDWnZAPCOuMUMpmi7nolrgU09n\r\n/I2w+plIcyIyKqpkDv09WB3/P1XNnApOV9IAtkIKMsYAUBinM0nwGfJSalnO\r\nCFealdFOhayvaEuCioWgu/GXhJdn/qnSIVJZQ4abveM82pE/mXXZb0s81dmB\r\n4JtPMpltyFJNRZ60FkNkBBd066Pe/kCx8ajVEKMduCipV4q0rmJfcbtRDLaF\r\n2A3AoDgoFLCwU72JQAOaJlyuFz6w80qxDKEx49MCeA+uxBwT1I9ZHT5GCxc3\r\n4oTzrAL89FGyd+kZQgjfOaZraSiAyZ43PRbW1rXUtCCtxiNcG5JtCVUssWgs\r\nx2hpyqlfWj1mr+J1AujGw7u7VngxTiAq++6cw7wH5CvhcAhrcM7O/vjTDw2L\r\nailNjMZQPx2GSFXmi/yxsy+E7Wiq7QTvIVOsEn1CwDb8YiFiB2vnL+K6cO4q\r\nQqRRjO9aM/iriYueo9OCUAxcDzI0dciKI6RHEixaV1CNC43dNkUNBKine9qK\r\nMf4wzldVQ5XOR9g1TU7Q4OEL7x42Kicn+Nx69AuaeBpg/Y5Pi1D6NS6Mi0ou\r\nF5oynmHmy033t9bcpYHx5LDsYmgd5jOv6oic9bSo7pQ3hG01wn780lRadmjK\r\nqadOZbkgdnYoVMqzDO9uIEj/5xGe8xqN91E=\r\n=K342\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2206072228.0_1654676905529_0.6277389376099975"},"_hasShrinkwrap":false},"1.2206082301.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2206082301.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206082301.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"32e83d3790f33da4840247d996ed3f6b256a796d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2206082301.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-oDlX3XkQ1OAyKLCPPiodcqQ2pvcwQwwVsp6PLLHe6RdAanCU2NpvPWlNrlLl6jo2ncz5QZ5VzItVIljjmmB1sQ==","shasum":"7a9302e67e7efbe08622a9a9b925faf3729c41c8","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2206082301.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACmOvOJgHcQIsg+eQYxc+oth0MaYYhUYiB6csWpmwczAiBT21C1u4kFkqFQMVEvI/drEGFzWPVj9HlP4DOBDi6XBA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioa/yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZxhAAjUjRk79Swl60JhXGQDTace9xKLsfMvWC0yOI8ZvxJhRL7bT3\r\nmC6IiYw2m0VKL8eFBHSuxIyDnCnXkb+bbNymv4Mvn2xoV6XlqnaTF78sdeP8\r\n+Ti/YAB2EMARjuzO0NJsFXqVysOaXzy/INSHASUUc+SijyTGaaUdnZ2Pu29S\r\nMc5k/Ehspmpzc783bt0pNBfQIGRBe1+dF/ZyB6Li1Oa98sRKQiv42/yGeOYq\r\nkecvD9YNGeh27R+0m4i3lTLrb2Yis8T0+RptQgcUx1PwJWrGm32Dxl9q/WtV\r\nrvYrAUZQceP5zyzaZWISL1Vf3w8Kkfd1Z9MNbUvKID0O6PkWy5rx+EzExtyC\r\nucbexMmHpU6F3N2uALIo6SHqvR00BCxJTTkeY3gWW4QUWRHq4xrxYZPZCVRg\r\niiZk/XyLALjvnFyniq7bg/t+rmC3UBf1m8tLyLWlT9ZwW0ALLHi+mU5YUJzL\r\nRN6Bh6kICQUArACAuQSvLkPp2KFtqlh9b1ca39dEpiF25ssfb+n2z35goGD1\r\nXQrxeAilQTzRQHwVMMz9gmDYtd9BSJEuqaPF5qCr47OkQVWzOZVY+QxcI0u3\r\nhMO+kwarWMLkZL996uDQYCk9fYQPiAeFNyWm+RfFt8ScmQU+PJrmjYocdgV0\r\nx5YdgU2fAGYJSyADlsW9GFieTwgiva2H1qk=\r\n=1A6X\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2206082301.0_1654763506469_0.19039982047619075"},"_hasShrinkwrap":false},"1.2205270638.4":{"name":"@bentoproject/lightbox-gallery","version":"1.2205270638.4","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205270638.4"},"gitHead":"89e43e107472144de698a2c3ebc9e78ef35d58b9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2205270638.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-2e8q16ZB3nXMUobN6JgrkaWrDjBooqBBusOyvT0Mf49nt6FSk4vuakll4vQWLoPdOt8oqTILx1DINHjfUAiNwQ==","shasum":"4441806705ac62bae360fc6b75f470e95c67084d","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2205270638.4.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD82fFLw2UslmCN0Nf97dTzioPclT6nrCGru4WyF/zcZAIgYF0UNCSHt3rtEaDA4wr8oLECRFmRIAA6Kpg6bgg0PIc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio7lGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/iw//R2sC/GqTAy4meUh+L+5kpEklHYxx9pnCKMDWwazGfbquOvve\r\newrAvg/uFqEvyKWcrVVm3+9d6EQM8YKLiV+g2Dl6Yq5I8tgI3fXo48uA80bl\r\nMUxxGuk4irddDOWJ2P9uw3xCCesfCVvdKhOSEtj9UluMawGEFAjQXfXjpLHB\r\nlTdii+YYuwuDbWM2Q2Z+6V0rXAxjBbuFcRTOE/UhcjE3dToy3U+R0Yvjnuwv\r\n7Q1qa5PARc3b6c0ulHORWZ8qSKuNC2qmdt7BbR0lSndNoxlc4QzQVfWP4PQd\r\nYjEnt60dBTpjZ6K9Xhi6/YgrmeoBCEJtrQURL+FLQnoY3AihREgH/+xZ9xAm\r\neYTK3xo4NADArXKVJztqYjW+VPxESwJ2Ig6FyGWBKDvEi0PGGgMLYdRxZsUJ\r\nwnpvAuWZDHWRF1NwJmvCTLtIyQqISXuaEZILCEEboHVshk4niAa0Y1RWRFTf\r\nZkjTZ7lYC0q02tOrkFweIKTb9NLKL0DYnadUmPj6m+r0FeASujXeXRORclQ+\r\n9Yqj4gjHxbrG9RicblvWZEQjiHckPEhxuIKVZ6ah/9PYZIfuWbM6XujRkoGJ\r\nz9buIz9BzFfWNJ63XDwNAOJOtmq+IJOHCeRY5wLib19Ll8CE/nIGADjmR5wo\r\n2BxuAewo1EIqem6B5lRsOXg38Eqjy/ewmK8=\r\n=a1ds\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2205270638.4_1654896966061_0.5344564688892182"},"_hasShrinkwrap":false},"1.2206101637.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2206101637.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206101637.0"},"gitHead":"89e43e107472144de698a2c3ebc9e78ef35d58b9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2206101637.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ercIPRmpt/U/yjJdFR7tF8DFCg3XhbicL8ktuK0peLUxvm04MxitBZEFMA2Jw+LDDUGGzxg69glMPMyqijjbkA==","shasum":"d973fe4ad43c34f3666a2bd5bc079162e3629614","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2206101637.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGp1q4FG15KMMMvJ3L+l7hezlnlSUvGzHgPC8Ym/C8O0AiEAqVD966uvHyE6Qa+vQ5vnLLQItIqX9UGD+AypLOtax6U="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipFH1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyfA//TNbYApx12qwqFRQ9nCMf8qiXkuRiELlNSQCe2b+8DqXpCwzy\r\ncLYzAeQhvnlcyk3WnZRpXIVg5f3m2NxX4raA6OHLrMqQJlbnYPVX5yqlnj+X\r\nw3EU03vg90v49pwoe1UYKakWTEBayMft3D3vvGyBf+vG96DntQOMUAmlqTOO\r\nLhVw38QNduxZeE8GNu7aoDMaZxBWwsrLqw6vmU8i17fc7icA8NcFE3D9Ko9S\r\nJcaVIjqXAxJElFol9FJw1zIIMvSaX+3y92U1fJrjhjHsGGrwKwN2gSNHOsBT\r\n16FCWOM07s86WRSVP2b6Bk44V7B05oYxDEm55Y4/kei8Ud9JWss6VJBW+SQ1\r\nsrQHIlV9oy576ZGWTkQmjFpACyBDe5xz6NJJp9DKsyI+lW/uiDT0Ch6BLYnJ\r\nCz+H7TdBchsFMLM027+NXuzFVR2s0VMaVtS1uQh8KEPhRstR4qAviOxG6/8j\r\nt1lm6jRVNFGe2+bdzn8imSzrkzXYyAxtzePipvWmT8RfdSJXRvDXTL0D85tJ\r\npybdGs/GqRjPUysgbuIfvCleek1G4freOTvPNeLc71oMtE+FeRZAz3KO40DA\r\nNy4B53XBVBugd9iBYjnUrDI/mnOvSfXPxTwvU6eF5FhLpf8HEjqGmi+TLt8f\r\n96fpX06WeVDpaEgM7ytTsvRVNd03SyRc2h8=\r\n=+r5s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2206101637.0_1654936053604_0.8171428305311652"},"_hasShrinkwrap":false},"1.2206131450.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2206131450.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206131450.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"f8fbcf58e78ea43df73b529ed4a25e79ac758981","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2206131450.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-2v6BiifuXw4QW49GK0Ql2MXbwjRTfd2F/sZI47v1UtfZK9IoQaD8jJIB0+4XI3/BUDYS+mI9Sx2zO59+Vpo4Lw==","shasum":"9417a1a198004ef60ac830f117797d2fd17da49b","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2206131450.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4Gtn0iKmeuiv0sOEo1G4utl6g40PU+IuATn/L+XymdwIgH2OYFemZH6YnXFHM2ogwgcRUY3LquGrarXoNpmmHIS8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqEbaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolTBAApC56heryVguo9t8CxrD8Qm7xsSpWGmUvJwXYTwBZTXu5jlJr\r\nMqU2YiCsA19zTKjCDFJcjmU5k4K06KSiToVE9l6d6222hq3EeCkUoAUNPvz1\r\nFjDyxKXvcTuyrvp/rqDMoIHa4vQia7J0b3eIU1XcRRmtupyXCueb5pcEq8PO\r\nEp77AR+H8EknisB0XzbqCcgeoTZ0yw9VqbU0wOun8mmiTVe5ZuSXQTP9yMTv\r\n3eZ7dIZIW5gQbCRlvB6bmM2H6uRFcUUFKV2H9trGZbJ7v4jS3KsYL9pxsBQk\r\nmCjnz/HiBS4PYJpsNNiSzYSDVVY9iVxmjoBptxzwZVMAiE1a9qHJqowVYCdL\r\n6wXpEN/nd9qRo9MSrVje2BWCtk7olnUEzJkW/yUlFVnBqr+RKVfDLAqjpEG7\r\nXA3xOM63u5Kt+IW2qAYKmIStxVhV3ILqlSZuH/7CZRa5cFgzHYpVdmiX21r1\r\n4CUl4Zs5jm5DkTC+QYqSsOChNW2nkokyylQ7EAwNqP6/Mat9xNzR4n8YjXo7\r\nbydZuvHZc0sQNbgHvW0YaFZC1r+tz2RyM5KZ4mk0zcnWLRD5gG9dHggnWrEy\r\n1yS+EI9PjfzONATKhKKCEEWfxrDxD6qVxqAGEKsAMcEy3p60RfUePURWeJ+P\r\n9saMGm3XoLJbCIDl1JZiIc7H4w8Ahq10Zkc=\r\n=HpIP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2206131450.0_1655195353846_0.08155375836691192"},"_hasShrinkwrap":false},"1.2206071918.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2206071918.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.1"},"gitHead":"fb620756f1e66d99fa06cbc467207602e4aeafee","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2206071918.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Osw1bmOXDRm8+oFVv1xBML0gpTJMIGpmP3ZH+yIxAJvA8PsGcLRJjlFcdDHUcrQjs/VKntf7i1DEfrrCl1dsLg==","shasum":"be2557a5423cf3d5b7a830456f78f3645087126c","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2206071918.1.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBAozlmgYNu2CnSETo0QFp8w75NA0AUvseTSeDZ7/RI8AiAbSWM2/yHSdyOA+OypnGHrl2MswFPdF/TE36h0NOZ4Og=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqP2JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXlg//f8uEg1rOBT3DWqMe9A1e6KyxUzTjoYgAQSTj2lqkchZgHmr1\r\nhqReyCTbpqd5mtCuYbwIPVQpIaXmbjnqzM08iwmrsFb2nGt+EW86KsXHUg/p\r\nqFTBP8zL99Kq+3ubSiSbzmKD6aHc0AFL3iR4fiX+AsRbb4zGsiSwIwnz8VCf\r\nqrV/PnqmFSTI+RtElhyJeZh1IlYP0acKs+jqaWqLjUdY1sHjLoVp5/2k7knp\r\neu/IIKkjyiXf81i0K7UL2z3pCqHNp5DrNtiBgw7PIYWAP9kAC//MqvqrW/SY\r\nqnZ3mlSpq/Azrc+D/235Sjqc8jwt3JSBtzaiouVJTX6ykxLnUjddl5YWdUKI\r\nn55j2GJsikkOvqTgOejYPZtSoX8LAciV843AZL7TsCYPalsTjI16gJYJrW7v\r\nmyWM3hoM3LJURR9cWS1l9WW+yAoRiPkxYC5J5Kxylm2knEBazRskhL/gEBoX\r\ni/2j4vrPVvO/62hI3I1wU0gnkr4tKfoNAMDX/SRVtqSUtNaWD8ZNMt9EzWTN\r\nVjY+8+TrFYSBfPWoJyb/brysg5UYUXiIfoIXfdRla5nb1sokmYeoMfs5eTCl\r\nShyn4OJTTeepppHamcpThrZGD9oBZZNE4unG0IXAFnAmyJELp065MNVNkfn3\r\n9X2xeL8w8zjL+6Ruq2H/UYWrxT9zsg4L0JI=\r\n=MMat\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2206071918.1_1655242121018_0.5893835124291729"},"_hasShrinkwrap":false},"1.2206162023.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2206162023.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206162023.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"15781b541aae254d04a1cc777016aa40759100cb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2206162023.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ifPIy+Fcj0R9mnAHsVjjh5QR1LQwRSPFLIir/CxugzZFa634oFPX/SPXtRUI+1gOQzK7dQj47kW6RQLneErdjQ==","shasum":"8fea08fdb1d9c613b91140abd081db7642da9651","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2206162023.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICHowavvZIK1Ji+qzfOWWvjvieWXpm6gYGLsjgbY86czAiA9W4meQpbkyL8Q6duCn0d8B/VV5aduqClGtiy9x+mpdQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirDs3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKaw/5AYfQBKOinzbFUonvUNAt6mDxxmDO/ScUTY4nKmgOZOcrYLg8\r\n/KUeXN3zYyCZb90Fv1VZelS80DdHuh5qKiYBRnHx8pZt6nyXIJ73A4XE0/j0\r\nKAxbnz9YArwv4MmO7Johz4Qu5/nl60dUYcY7LxLSSPXKTrreYqPPHdrXp2kR\r\n36oFTDjTfIBpSKAhgqR+SXAPdaYhvpuYnRaHSCM7v6h20Tl92s6yQsRomZnM\r\no8qTZM44EvT3vuKmwurmZI9MqgOK4PnCCKymClanYUF9V+sLSyhxwgk6yCLk\r\neEK+6m9Hl3w64EQvJurK5kLD1QzHQaf23ifGm9aAL7GTHQv6dO1URrdKl61/\r\npaFln7R3NBOUEPxVhtMGD9PvBXEUzRLtHi+mRhh9/cKRRwpixQ9pCXfw1CMW\r\nxc0mv2NeDInhUUJ2AFlD/uqZMZ5NYLM8M6cMu7mSZmLIRhf85KXMq+EcJMOu\r\n4HaarExFAkYc3ljWFQDgD455Pp0ne2G7yayGMua9XfM8qayTTk2mFrFYF0WA\r\niNUejGjfAmxX2GSaZJLTwUwoxwRNel8ZSDnni0e+ps09uLa3cLNFJyW7D/5G\r\n5Ns2elf4bFe/Sr1DokuVIG8GqDcL3yR1n4vffE4dQBQ5VgbrPKkycD+LlFX6\r\nEdw8YCEhy5rXbcIojcNNToTJbLgJX6mG3gU=\r\n=HU+o\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2206162023.0_1655454518932_0.7522644547075283"},"_hasShrinkwrap":false},"1.2206221455.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2206221455.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206221455.0"},"gitHead":"0f6cdcebd462d3dcf580d8df0a7dfcdc02de9061","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2206221455.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-c+sqzgJ+EjxX8hZHT7Sr57Xe7/05UbPBdYgJtQDNG3a3Do5cP1IqFWKjdi3y3LpiK2XWhBiWJRf22wZGDlk8pw==","shasum":"ceafa9767901ac69a237a8915014718f2a97df3d","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2206221455.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICU5iWJ6lhxprdjcK67d7CNmR9y5TYUo9zorgAernxYMAiEAlo5IZXw7BI4kJQNqVfmlsWpeWYoHwe537MffE4OERas="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitCRaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUDw/9GSM31Kn3fS4rNFYT/II/CryYMVHIAYlqdvpGBYv/Zzh4itPF\r\nFrWfE7dhwHfaVdNW07mm0XEfhgILJ9XrkpvCKP/Urvx0OZkoboXrCkA+B8gs\r\nH6hMr3/LVYuoBrQf535TKJwURtufqoJd9qqfraV06DV+d2fAOuxaDN6w5BP5\r\nWtmmaXV8RjgSyYtzn8LUj26dzyr/sQJFpPl8/+a9U1lXZro6mdTPad8C3d++\r\n0wvEY9nPfSEVMDS060GaSQpNa7pRT7k+AHetY8h2j8fRGyPzsQvuvFf1Dc8/\r\n+OoXg+gMweqGY4aXDMMhBZWVf9tlYtXruY1uB7SvfTc2OkGs4vN6X3lQ0JTU\r\nFqsmEYF2HZ2wWvBgUQmimlRVQ+lf8vpa8klbLgSbqPr0YYBID9cWtS1OE+uY\r\n/c3hx3UkV/IcoOlafbOL4cwMjgjbGruPsovvVpaoN6y1mPVhb3W6RlKWiz5E\r\nhF0gDDZ9rTugURpaBEM/cEulMer9+G1rAU/0O5gvvefD78InNVOwpHnJKUH8\r\nszZ7pu9NhnzkVvGhygonfagKEnl/+a9jIVeGaMNdd/eURpC22ZONn1iRJ2vG\r\nm/EOwEd4vrASjMtQN+6kNRP+I3wKz4QQzAj26YMRphJshv7YbRfDvoQ0+gXM\r\nt8GoW3ZEuSz9ltlFaNvdS7WDYnj5BEBQfyY=\r\n=x7Fx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2206221455.0_1655972953961_0.9790288175217292"},"_hasShrinkwrap":false},"1.2206291614.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2206291614.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206291614.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"34fbeda57c3cc9d01ab3c39cf9618342ec840187","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2206291614.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-d2aHHAMZkSsa4nmWMGuEw4Aj0poB95NsKOdnBHtpKVd7W1sMRFoNJaaNMI60k+/gc+9VwNTWlA2oO9HIzUe6Mg==","shasum":"7cc69551c719b51994bc59e636d63f6b710df85a","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2206291614.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDl6pQ9TKgoPjzQUfbizu+eoW/lL7O1efY9e3GNyJKE7AiBug9VPpe9gV1V+qbF/JPe2Ck7rALppB7AK6jpFMs7hGw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivcqpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjtw//bK97RK2WD13hjjQ/F4ttHknRqAsFJQGuPYI28w4IkzEhR2I5\r\nvd3t7xk6TyTv2OBYVPTiqi5WI8F5/lE4bCwC3DM+XMEom1rDfZGWDEXLI7yM\r\nEl51D/jbztOjhEt4oWabL4SdyddxiEdbh4UuL8DGtgYi89DaMdKUq7X/z5nK\r\n0Mdz8l29wft8o2qxjxqei582ofCi0H468ztg4sSviV08anv9H1/LjHBRisPp\r\nidrURtGxGp32R0k1aWRFsvxmsn7nywmcpqSP4HIqmb34bRhxFnnheLq97+9b\r\nlHLL/SMW6XoRQ2ZwNteTtljhfnukfh7KaD9gHG3FcQAEcx6syIR75Co394W2\r\nXJ2kQhVfX+9ExaCUf5GdLyh9/1EBM/iIx+0gqh7+gRkWFkVjcZUltfXKMN4X\r\nD/Fh0fCgImYzdCGYSE/neu0wxeEqBXvKCF4EbNfsTg1S5Upe9HsV2rvNdKeb\r\nloJBYEpDxliOx/FBiwTOf3R4CSwajSFD9Ujri1/rPKUQu3dSWQuKJ8YIvmgp\r\n57SrpT00ZjnxZOHMHDFFPClGrSX1jfzZJ3ebhXq1EUSThoqxEwhC88bXQYo0\r\nLkLiKrX246CLTlN443CwvpGzV+JvPz8PO4/OGNQYKYBhyHPu6U6qVx8aAIlQ\r\na3YKB5tWhZu4CEfZgcp1TpHkH6TOn/Zk/Go=\r\n=Hp5D\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2206291614.0_1656605353337_0.5582572440830935"},"_hasShrinkwrap":false},"1.2207071723.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2207071723.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207071723.0"},"gitHead":"4ab5ca14023804a1af71c15bba775c5805e2085d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2207071723.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-aULk35qny5GqHZhEdYxHzmngM1UL1LibfPC4IBtYYnOaEAFcj4JytOxDB9V4JgipnSfyiuFS+0hfRFQA7UTH5g==","shasum":"541c78446093759283d5386d8f73748d5bcf8e55","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2207071723.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAk7rA6+edXGZN0HjM+GYlx4HRxLPxdXXuvC3ouuVaAwAiAyvBZvSm50aEpu1dj1tmxxiVs9NviOA5tv8GSNiSapFg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix+wwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmwA//WS5IgKmkS7qPodbmT6YAeqfBlbXbj7Ow8DZ8tMfOcEX+MEmc\r\nN4/gp1822SxkZhEOXwEzIsuQ5dmS0HtdmEKCcp6ijcMVoTjEtiFOUdRuARU6\r\nKLqajO6oKL9m1+bIadFo7cdpNbkIbOhgjjAtLXyAcys11WStJkiMfo+aPJOl\r\nGkTgrH8tmJzJqnQmgcPgfgEAavPepsPNhcL5Fgq+C5dRvaf2x638aMWTnZl3\r\nLSubbCuLKMnE9FDueroJpnbs5WIaie+DE5s9s9ADH8brlMDmFw3YjGXckRAZ\r\noyFsCX5oSzEgzUPyu6GXoziquVFEmfE42RiMUWojGPjSx3YcVi9rA5+bt96d\r\nEpnMQC/cpirU1xDpBbIsS5lXSfyrfAqApZzc+HcjvGv0bZdmWiJSmsBw9LSq\r\ne28R3Bc4oJuzs99LDNuPFKUqJm9Jqq2QBneYdhCG7uoo3tFafylqwrLun+Kj\r\nXPo8zzVS4wubiCraYXGX5zRF9V2JPyVb/zKhF973dO/Hignvd3vAvebqe2tJ\r\npOAxjGULRFgK7lcfNXgJB7UiTfvFjApfdJMfdFBdJ8GUCNK+PBp4LvsCbPEO\r\nFGVeLRnMbT2EwKDMLjOnrUDIUS6Kf4YwOj3Bgr8PTxGCv3Xw+Iu+n1j5qHFT\r\nzfCo1XowZr441v5sM8wxbKda0mDpBII9I6I=\r\n=gqD9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2207071723.0_1657269295929_0.5796491960366037"},"_hasShrinkwrap":false},"1.2207181727.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2207181727.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207181727.0"},"gitHead":"78802d83c6c9791cd4400e761bf22f9909218a58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2207181727.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-H9aAJ+iZOth4yeNhxbyNN1DL/BtiVKNGSD36SQmXYlFpyATSZN5CDKnDwL2O016OE7Ote/3THw8QLwVEH4+KyQ==","shasum":"50565971bdea4ae1186c918d4f1ebbbab183be9e","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2207181727.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHcTDT2TVgcfehEsiVn5j/7N2KFZcEYiCZwmqNmoxwsAiA5cP2bZEBZVgPQFEgIAiS7xIFgc1C8w9ykynGKo1eW2Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1msOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMag//b5sGl6gWBxbaIdbfvsR9H8oGWVUcj77Fl2EjsnUvPNcj66Pg\r\nkFPEcIYgXLPtZ6w1UQSImXr4qSYf5CxFFPT1KzKusPYepj2KcxBvi3Bw/L5Y\r\nndFI5fp0+r4AZ//yPmivmpexZJ/aWTmUZc0gZ0LFr2v8Ok/aAMKGIdZoN19k\r\nTok+WU8CMsg5g2FTfirGPqWqJeM4+17x688SfZ170J93eT8VBZpM/rB+TFYe\r\nc4m7HC+18yeFyEUFqyJiHeKSXJnIibBUcTlPI0X2S7+v0vX9zhIEjfP3fbSo\r\nA6o34mjqCvObg/Wh9b14LLY4ajn6xz0zAmLCFNMW6BN0jZEoLR6Y638Wzk6i\r\n1BLk2Pt5anTdos+k0BSbBUjN4UKUrJ2OwQeIwmCCV2pvPi/i18IdaJVzYtaR\r\nIzEsIp4B/RgxwZ24Lg/uyzyQdp/ok1K1xFcoP0c7axrtTfyGBCT4bSGypivI\r\nff8vivz0rbiULhk9t5vVGW3mOGFzRoFCSzlyf2efxTFf7v9ajUAuYlo62mny\r\nFk+Ng59Kqo4/2/6dIsLLXa4AQOw5893E+CnAuJLCBC0AikMqyQRLFOwVzqoo\r\n6s+MZMk0kesC1QQ1U26Z1pPN/AMyvWpsFkn3YS+1eJx6cMX49ED4YjuYOhaZ\r\nWFu0yvVg5Wm1+Zt0GYSPHxdE8g0pgyqVia8=\r\n=wNU2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2207181727.0_1658219278116_0.7664025939854724"},"_hasShrinkwrap":false},"1.2207201724.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2207201724.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207201724.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"62d86212e783d34fd2dfa8bd02ffb0e447c0538b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2207201724.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-gew6uOmVfhGnTX7QV+UzkVpN59fsYdlHw99wFg6mnzlNb/Ymy4+wCKiPfuOM4Dgicj/EaIMbsmn+/baIp/ddLw==","shasum":"07e96b4b5883ddd3ab9bc5acfd852a1becfb301a","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2207201724.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoqpiKntZI2nVRC4UYjiq4nHA59GZO5r4j5M360W/paAIgAofL7cNifQS9AoPgS/Me/dHQANIcweKiJOho9lf/fWs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Q4mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocmQ//eaGZNmJvskNew6UMaJ1EtwsC89uHx7Puf9MdR4Ma9ts6KAK4\r\n6TadWHcYiHx0/n8rPLohi/k3dMfEou1L1iQzVHgF5a78G2PEZtTcVu/k+ieR\r\nZ2hJ4jTOVq8vQ5u1F0pWfmYFYxbt+9v1qgBVI4o3eGQx/Q2o2rmjYOar0rX8\r\nEgzSfSufE1nrge6Ix6O+P7kYskc7kg3sna3SE6T19DgrH3pBZ2qLunmaBZCp\r\nUsX8I+I5SQZohYZ6yljYDeXhb9boSj2nriv+V00D7mt8MzobjT+S1fBIgmgg\r\nOYPZf3eb49oT8pb45SjgYtKA6Wg/yPZX6DqdNuZob85GiGPcNAQgqJcWv0mq\r\nQjyshlRAgSeyp3hbxOSmp3VUkX7cdYM3YhO39RyWRlifA7ptXLwoMaH3Bz+1\r\neKfjwXeuIobUi3iWyOSue5+OqZny9IfikGIPSs2XApojupv+g0Rix+P/Bfej\r\notDxt4mmmCFRHHCrip+HGMWG40Co2nNpDvmXDbB5Q2icX7Px4cyFhTd2vcUa\r\nXi4LqNFFNy/6RlMgqGATjUz5NxJDEveutsbjntXd485xE60qM0k+nojCm+CX\r\nS2WsOQLzvVFMaoJf2XpIuQXMem3bjZJGJ90+8anK8jWAoDNFVs9pRbBdX40j\r\nY2mXwv+JfcNpgqvUfSwuW8IUk0rkBiiZ2c8=\r\n=kPp1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2207201724.0_1658392102626_0.5958366787122107"},"_hasShrinkwrap":false},"1.2207221643.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2207221643.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207221643.0"},"gitHead":"83270c82c0130eff7988664c86a7482098f9477e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2207221643.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Hi6PfCG5AXopQmUERdHhmH6cKE7Y0iNCY9WgxBIvBU6G1bSV5ozWnzW9VwYdf+wcaVYTXXFJYxmSWhWtdPj3Bw==","shasum":"a45099c82252ddbb48c5a891ca6c3eefaadeaf1e","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2207221643.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCkSEpU8k4jXveRy+AtK/cqr1FfyM47Pk6YW/ZI3/H8gIgahBOt6wZHq2neWDTuBHfomszIsS6RpOPnis9NH5G7QA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi27EZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVMBAAkOCSAvhlt9JUawzKf7YJhnGhKwjvWat4F5KwEfrek0y8ABuw\r\nhysWR399AGEpG65iu73gfMxNGcK+aKvCFbem7pTLLnFLsvUsrsHAY1HQdW9N\r\niZXCZjyl/vEyUCvqBFV/f+gLhDJEi6WyxLGmwS9wyN1pp7dTGHhWnLRlp4rz\r\nYOYDK4ATCxxE39/5JvyQRQgaI12BlZE6eTjLUXqPYt3eVwRuWlSujnXpFCrX\r\n4nxZ6vBDY2y6qK9HOmF0QnuXPTlGtAWcnV24HZQTdg99GFMKmPH2jFlRAZ0r\r\nQFBVFF0e7R3kUoHQP5Qr2VVmqsjqdv4Z6TMhDGdUAn0C9nBeslhuNdH7HZOj\r\nN7CF6jG158IBjpkdxrG4eE3npNa6K8kR7Mxmf79RUQQaTqUZEOET29BSVkB8\r\nIqku5NjRMeSJE2lGakg4JW1nuN9in5JlmH2p3TqT97LWT11GKXjBx2pdQram\r\nqqGh4Rmqf29r/GanvXx1zMCvRccrL01PD7IjfN+K1H9FBwUqYB+6LAKvrSKJ\r\nDnd02lUKWLq4nuNNR1hC4zeofelaIR+T58oE6kJ+tvUXRYgFjRVNOsdRFVRj\r\nwAEO8PcCQsAMDjsHikAKppsmJmMWzUBVm2w8TKPtSZ5V+qW2JeBPTaCfIOf2\r\nkWKIhLA+xI47GGsxs6jQDbukNFoqKcL9DS0=\r\n=h0y4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2207221643.0_1658564889503_0.44769257405937646"},"_hasShrinkwrap":false},"1.2207261725.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2207261725.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207261725.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"b73520d61dc1a279ec10d2a27f58891e2e2d5d93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2207261725.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-disOrv9vnOdf1+MNTq8dl6JbSzHUYZj/e96VXxibJ2AR8FIR0c+0V4TDR2+QawEk/8azuvpaNTYRtpOnihRU+g==","shasum":"d89af73a4534751fdebe3d0ecc7c195f7201f80f","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2207261725.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHwCuNuQaQTVyV0rGQR24IgF+594utq1kOzL9pc5b20ZAiEAtm5VEtGAhX2th8t9HaXVVhnLgnEII5gcz+a+sNtNtHQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4PcDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplOg//Z2ozbvWD79rDRXazXEREdi27OugNW1RzHLohv/fLmvPd9QHg\r\nNym3eUOLhPNAO2fXpQZ5xvqu/BPX677NuiSdpP04I3zu+90zQuTtZS5i4MSf\r\nvB7W2c2gAmiSqyeT2D5BAfX1Pd79Ir+icEO4u2c9gpjJg5kACetlvB9n4KAl\r\nx7QbfoMs8GvXMRnC3Xw7CFpMlL8h1NzntDKBZ4hrVshZSEPT7y+a7HhfBtsJ\r\nsDUtN2+YDUT6ZJejVNBtrERSmF0dCtqXiZQRwrbPC2vRYEznzI6BUF0uQOve\r\ndew6RLgw4EVQDMNzb56V1l+cJJ9WsNEmSMzUKgp7rF4bVToRJSrp9rA4ZnOX\r\nHo+82uRnBR6VSCvhUrXxUHw1ihaNqqocDHgDSsyJPgGhhrCEmr858P0NtTfS\r\nK0zAPcgB08s6WTs7CnO5DMiOfo8i+ziDK0UDqWTR8yhrDRb4nsWx9zrGHXHW\r\nKcFo0Z63SrY+XWUYq5Tl1zQNDmWEl5RQFsiKaa7N52aTcCZMZIgQtgWIJfFN\r\n9mR7C+EnHLyFpIOFE2N3hOFwr7MiC0Sh0XOwwnssXtgrgxJK/FCwZxsqr/v9\r\n3CEkFcuqiIlU34v2+kBqw0eH3JwhnW39ZO5XUEQ5QbMET9oWndePTFxNLPYS\r\nm7q3ZSDme36HuQ3t3xSD4xXctwdpRZVV5OQ=\r\n=WkpB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2207261725.0_1658910467077_0.3629425010455001"},"_hasShrinkwrap":false},"1.2207281718.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2207281718.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"5e3f3eee6148e0ebb57aabc48ef987e9b5528611","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2207281718.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-5MUvV6jaUUI9EBMK1Td070z69sKHNa7GXzj/HegkD+mKh4Lce6DlfLUVweETUnj4uiG8QOTbShhupAnB0LwlsQ==","shasum":"6ef115c845aaf526329cfb8614f8fdf7dde6f58c","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2207281718.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCX5jPGqa3uST8wZOZCAv/zxLYX1UQUM97Mfi+jXzp6cwIgNjxAWNvF+RgvIR1879IDwOxE+679ZTYX/1zy4LtqAxE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi45qgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqyA//RpVBmammoUofNSXKT96FuVqJRlbqDk+OxVG3NUGsYjX6P5kg\r\n9a9LuK8sKzeRMd7CWOTFTeSQmMCRwNOE3Fda8PCOOAF7oRh0skzcaDvpl14w\r\nglys8DS9BGLI9rVe9aL50FFwBvRFDUNzxvcJ3EceiLsyAf5m84GgFB53+PcB\r\nckWrBQIcPHshTYrllGlPxQj9fjZntR4TXtoWOZ93FLsz4Fcm/nWMYqR1GTgM\r\nAFlVAOdHJHXrrLjJ2xLpG6DFbXS/YnUH4s0I1K9XPHqwhynQ7jrAcT1tGDxO\r\ntjF1MdsUUTECGiHlnlDNZWiG7mVmER8bmU7R3+VBgYw48Bbrl1wQooftkO+/\r\n963bn7irkXTauFJcCCst2tDzRz3L7Sl1HpHAWXZ4yGIM0GMs7B1qHHKvMI5o\r\nvylTlemz/tX5+9gF6fKFAjRLU32j7sDVQJ9Qq68fHuA3bISVq/GD+f5eNMoJ\r\nQOoKs+qQaYxb7S7oMBy/yPCT8CmHHvk1U1YR9wkb0FEUxTRPyluUuUxGIYSy\r\nn/gyPByguXWzUz2t2oCdltlyT6BR45VJs6M/wFCPcCxBxWdJa0izGAzpBMso\r\nvn2yqGlTlEQP5nG+40mgUMc6yRPVXsUz3O4HHceayBHAk/dlmX0DCVIGcu9d\r\nwot1GqFGYkv5KmBnFkzJEIR4sfU5S/4r/Wo=\r\n=DQHr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2207281718.0_1659083424757_0.8953716701102115"},"_hasShrinkwrap":false},"1.2208021808.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2208021808.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208021808.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"b82b832cae23ff854449af280f1b02f4dfeb99f4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208021808.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ClPs3cqhmIxZjzj6VGOdfO06XoyDDa+xqYsBaTidNw5IhJhU8fWVKK0G7Qern7WNBYymShcsF/ncfzilOg15xg==","shasum":"d5e95454f0a2b22caf2e4ff34f79c90f5b916c26","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208021808.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFNgD2nD501rzMtJEI7RZ+Vtd+WbhTgASo6Q2JvS18/pAiA1OBq9VsVXV6lePKby7wdUsV60EDA3/cXrogxchrVlLQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6jG2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTXQ/7BBtaGp6EIce3Uzk43/xsVQi3XF8N1PqRymtUrV9eiFKkVqb8\r\nHXnEqCW1czq0NVp8TYvtUAhLaHB6QM9rNiqxsBStH+gQ2qWpYm0NKOyN3Sou\r\nKDPW1tKxL6c6xjcmPFawPCQ+aTP1tvUrF9C0QQ2OS9WYVk/FnnWoF2sJJ7vR\r\n0JSxFyK7B+t0JYQ2nmrTKlm6VccouIT9DAvCo1eKb5mgP8TPb7jLDt1BeApN\r\nOp8hEsnadYeCscg77lYzToFcBp5O60wDYP6WYHfU6OKv5tT2L6pc5pCT713T\r\nuvdtR2FIAPdFGyFqwOFEkq1wXStP/9Jtt/ZRLFpowEZeI47FcG23Qu56F9G8\r\nwoS9pKpTNT1TDfLzb/2KecsVY+qdtcVsH8+0QmYt72AiojZIW09UKhM9yrs3\r\ndpf92eFcMAJdpUTnMYoS7T73aoFz2ypNm9lhP/4ggmAmO1WQ9l7e8I/ihD9c\r\nsassSFDIk9C0bJV/l1C9WmUYv0DIkVZdytOtBo4a3kNsG4ZvhfuSX7AH7Q/v\r\nkW6tjgAzVbIDlWocThjqK6a/ipzGHDHe3mbHS7A7tkCTuy3AN3U/O3musUZg\r\nh6zTOKJjepO8vz6JQR8KXWbGfeVVEekALxguDwAGYzmAKA4uc6/daEVDRkVj\r\nVq9Cu1705E1vbUaAE6Txxsu4W78bk4gfY4Y=\r\n=MVNV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208021808.0_1659515317981_0.0841449489146684"},"_hasShrinkwrap":false},"1.2208042017.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2208042017.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208042017.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"598aa15d3922507a106666aca29a90334c7b2c05","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208042017.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Okv9/wTPGCiwz8uHVcMABHc9nzkS3fg68xpCaUP0Juqs402sSF96l/FITn19Xj53I2P8aPwecjITJcvGDqyKhw==","shasum":"37117d2d4a7da31834002d71b8afd3091e5f1433","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208042017.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAe7JicWM/0IyhRElQTmqZL+YUjT298rTvG+ZSs+r5HwIgOZrbWZOI92e/QcfVQNifW6Kk/7YwjpomaWiwyNPwHeA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7NUrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2ig/8Dq2VH/vjjxdoBJI+tSJK2O10bvCz7cBylttGpuHz+ui3VXlU\r\ng4AtC7wXzHBUPGoX5NV6Ey4uh6nYvtdku8No6NdFmQ9p5sIhJ7TJA1MLmaOx\r\nHMYp9P2Xivghm0MJ0lZVJ0J0VpMPN7vjC00qQafHszy9mWY5OBBHzLZ8SVda\r\nQ5I4s8apg/MbdJtI8QQ2ZpCVSwWfk4fw+UUZHqoGCGPUK72iNKVY7yZdftMP\r\nwpH7gRPvM8mY8rC+0W8JfhQ84AMpVfIeXlGIoyz+uljRnidUEF26qdIQ+2sD\r\neoxbAzbTKJaSmHlylVhTd1cu0vWppHtBumDDrZStUPEFtVq86kGr5kGi4P8Z\r\nDBD3K2xJWONfrX9qCGkHC8R46spsH6MrJeWPT6TOpx7EY8pgp0YuM7JindG/\r\ndmI5BOm2XTWpQTKc7EK8lXbozOS9GQBjkedHXY0zCbDZBsmR09flr2mSArat\r\nEvxXhIsacEkpFH5Nb14xMI+YfOHYFo4mDfBR/EOpgCalSqq+GVnyqOQkR7jX\r\nr3NeSX1cXyBJ5agwzfJaVV3iyblp8jzKUq08Hu9wkYbq40BKIunIUpRIhOHy\r\n0/D3iN8+ibaGU2OoKklbVdNs8YddN+BIuAbuxWfkF/BZmUDYZjh6lfTqKtdJ\r\nw8fXNfN6OXi/eVUt4guk2cCdMnGlCBx7ZNM=\r\n=Keab\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208042017.0_1659688234694_0.39603177549312596"},"_hasShrinkwrap":false},"1.2208051912.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2208051912.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"5f50e49dee3435f3a242126437de7cc8263c2ea8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208051912.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-tg+YPsl/Fg5QYw8YCgTxZnevwybOyw+p1K9RufdVoAevnoXydfhPdtic9YPuA3ePO2KXPEfbvmWmh01xy1ulbg==","shasum":"6e7bbdf93bf642fef071f31212947b8d52184273","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208051912.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnQA9t88iDgVo+FbBcQlLPQvJeoC/YBNQfune0413+cQIgRN5PQqM806L34mAHuMhzidTa7O7jQD0yseJ/4838jXg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7iZrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpyxAAiCV9dp3GohUXk11E5CWnpLfT4bd0h2AkGLjbvcVoine3Rv0b\r\nVZCHZCBFY90xoKLWZBRC9HiUEMalg2PllhY2yIu8HHEFMwMOKM96DW+bCa9J\r\nExk3JIJyUwc7Lp1T0ird2dBu37GH2vNouVsWxVGfRjEE7N6CUU5YzZSpUw77\r\np8fQbwtEKjQeUmCJ9Su+oPl+HFVxGmI3AEHEdhKINghwYcIDQ5tUV3cRpuGD\r\nQm8xLc3LBiUzZu+RcYJc9r7W0F39SE6vV7+Pcvaiflcf3sQEITfgggzzySWk\r\nPqfB2BZX/WYRu8nhjeoR+xQDfAJtMlYwu/dZZVsqvjycmQZvJ12vcJSbDlg7\r\nKJRSYeVmaFo0ygd7uqecdadPD3VLa2lnZgV03NFbJ8Jw7mG5kQiwueYF5BOn\r\nSHDHbY9pMt/JltTnN87Tsa8Eyp+fngLiODQcXriQRbeAc/Ki4+PIG67tuIT0\r\nQCEFMcNHeBD1k+Oi+5vas/pkL+R5pdvW29YLveuyutUBObL13RKNrxYwXpqh\r\nXnfYw8EkGsIjmISlwmF9KzhhWsz4pkjkT5COSIIN98iUN+/vVwIE+jGy0ZTV\r\nspnmYSFpjCljFJJlDcLfkz/wy1eyh6s4geE/M1vlL5P6p1Erged5fqkUNfFj\r\nkSPq3RraK5j6bLw0JZptSDQ4gyxTN24wTAQ=\r\n=SeSC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208051912.0_1659774571702_0.8871838044787153"},"_hasShrinkwrap":false},"1.2208081650.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2208081650.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208081650.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"beb9a33429ef933995a664a1aa534cf7ac0984f5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208081650.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-4i5kgvi2j6z3kK2VsF89Lf7HAxMMAUaPgsFMFXzHO98XNOSydsBxWYjzhveIF7tS8HXTITLi+0yFN2uZjoj+WA==","shasum":"e03de03ab07eb4119b7165e58707908874dbf5df","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208081650.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDghDXHW9xzXbvSOEZXvMtM4dtF+A+pK/Gt+8wVJENFOQIgQNI2FZmJZwuiqkboJxpwgZGK65qm4haWFdQgJ3YPXSQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8hrZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq03BAAnlfl/cmmWokEFaZVeRwKHfjFkQiW8JTnVS+tbSFiN/JfwbfR\r\n4wbZ/HOB985o6j9azCxA1JXYCjXPaR8eXRPL9gOawvYQo1z4yC+k00og6MGf\r\n/cXenVta1RtPF/1bQYiPVKH8dAT1lE3dguu2nU32nPu93mWc8LTOaNyv7shp\r\nor6CBUHKOk10XHSzfJ8RFpVIM4dMYwOr3/0A1TeB7q4oAwjWgy/uMl8/hAIV\r\ngkzDmQJiMdFRiwHz3CTtX9iffovZJ0R+u8nk1i4oKVrtH9TmQTdjyYjMuGcb\r\nyGA5V8ekJ2GZq9OvjFgfB24Z+diyGFGPYkhoNfXEOcEqDkNd8c8NdvMTPPWP\r\nqjMABX8DXF9t8fagDiPb5oe9XvXsAG5jsuTYtGPsYRvHcqjw+fEqtYEYaw52\r\nVS145Bj9+hDXkeD8eBowtA6pebE7cO0QQddq7QKxszN6eg+aHPV6Zx718SEN\r\nwt4xiwEwBdyQrusz2L3Hd3SQugfpylf6C9Bqptwpgz8ZaMFPQOmeIhcns2Kn\r\nlTtlDZz4lbH8TGdC5QHNyogwal1/fbaeftJ4aRvGmlMfqZmJN+axK0t11CXW\r\nC9Ah5q95B9waPZ2EZJFe48D+7KjHSi4511tSYyFb7jfVg0fzV1gb+vbpDsim\r\nzWzhmYvGXvXDglodCoNY33m7FAyXHMGlflU=\r\n=GZY1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208081650.0_1660033753599_0.9771355203531014"},"_hasShrinkwrap":false},"1.2208092047.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2208092047.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208092047.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"5147b5f8b54805bbea52be75a64d125a06f88aea","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208092047.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-sWav6wJ5dwe9kr+EWlgCiPRLuXKPKTcxy7ai+F1nM8bAfKlEx4qvdZHJARiUZS5QWTgit9g4uhXRM/IkeNBxyw==","shasum":"38dacf59f2c4eccbe6cb35c0727af099affd8861","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208092047.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9/xlrVu2hWQVsnl736pQPG0iTG4MTzZ7VxG8tT+UvIgIgCyyAJ/T9xZR1MwyaOi7WmhqQkRq8Ee/C/1aFK2YbyzQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi82xSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooYg//ZkbuHb/LvsrQqj/O3zqYcp/9+084mkaMvGdP6Lp14nBFfKTc\r\nVDv11v7Jl6QI+4T2fM8/gCEdsb8Iti7EF+9qm+qM23SIHQwfb2CquoOArOLB\r\nQSPpGHzGCU6Og0ZhAH14ZRQsLwR61rdQ9AMpvLW8wqeMDh5HJ0Yl/LlxjKX8\r\nvcN388qIed77ROb7bQCv8VCV5vWfQExK7cPUvhuFakg9+NMqZGl7qknfZiX5\r\npTr/fdR9+FcBpJkTKJphdWXfvfF/8KLabMSZUUVAZFXl8PSlv0AznZickmem\r\n7OdNScsEPKJqVOExSXhwXrphWyCkrIbwomxJR1m8trXErZL+P1pW+zmbk0RD\r\nlbR9JReegb9RZosbiL4itxXZVx3PQEry83Z+hG0PnhIPufz1cj/maiElyCsf\r\nCBXD8kkAk638DfdNPHaUvPpwxcgZNusZ504mxDFJBqk2bjAYMU39gmlT+/QR\r\npNPGnnh5YTA1Ve/CE9D1kbOt3m68kOtt8nDk/1bolCbLvtbzR76/blD0SSXH\r\nQAMtVRuRQv0EA5inMTgCn7sR7s4OgraWdJSdnLzsCc6NAMSP9qCur+F23/ZB\r\nss/ddJdYAkhch1lVFIs+hI0zpVbATkjjYRn5QiR+dbuGjr6wrvwaZBxRpTU2\r\n3kP862jWt7NoEL5DyAdRZTqNvAXi4nil2QA=\r\n=X5uO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208092047.0_1660120145825_0.6655100236400953"},"_hasShrinkwrap":false},"1.2207281718.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2207281718.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.1"},"gitHead":"b2cc07c9f0ea3633ed63866b9243ad0bc964dfe1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2207281718.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-SfGT3irvHXEd9leNFTLBROGB8NSqX/XCq6fKVwHPmQYWgh7gVwfmD+9up5OYAfhI6DVwfrdjkGU3Zq4Op92JtQ==","shasum":"b52bcad0d405a0ee847d443ad720dec199b83006","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2207281718.1.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCM/Yyp1pXhH5yucQ7pKxwGiqHzgvldITET6DDKcAlZYwIgBPQfrzxo0Xu5kjA7xLlmG4XF4gH8lpvTMtYz1nCfR5c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8+PaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ/A/+MPkF/13TgyNjJW9+0cLXR3AF0C4ZiHTryi1ZDhSPFSOJ0Xyn\r\nznWCL7+eIKqKjl9+K+IO3AdWERm13IXoQJkAs1xlBQQu3OrjW3UZpzoZpl4U\r\nUkhmANuEakja+GA/tVt1lGKFnn/8/mBVsIWUlo+eGzrTnMVEsrFy7yPHJ0sK\r\nu68/6KFSDmsotpsja1zyEq2y1Gbp4kI2PfR6GdmnixCGsL1s6tNxXWriCoqq\r\n6h5lWdDwE6UNhs1UXJ89rIx6OzlvlenH7gMC83diLPGO8a4oJGs0FR9y1hGh\r\nBEtL0MjkIXGUwg5FgUYLES9Gma3542QkQJmAzzZNXzSWhHd3WY92CHt3l19p\r\nS3GktUHkurZX9hmGe4uLuFDZp1Mw1N2ZkjaoSW0kjZqyo5zdstIPjtfpQEeU\r\nC1fAp8Rsd3S3uzyrSAAkTDDz5NlI9q+kXJRRJASIRH+uIfpJ6TdCXlxQ1A1b\r\nh5LGECbJbpN1oP5wkddbcNjgaoENlSJxYzFvb+Rvu0QwwOtFQLoQyG1YeNmy\r\nkXGFxg5S/s6ZWKC14VpXD+jhW95bYIWXqH/LN1oQgNvgETwXEBwmYY+OJ/xs\r\n3pemPvo268itx/FIaQlgxtTJ9up+E1316+pskgOQ2Y8naeQSBKCKlXYRRpwL\r\n6i+t0+EVaXkwYTYid5bzxUm63bOSk6W/2jI=\r\n=6f43\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2207281718.1_1660150746072_0.5366079791764593"},"_hasShrinkwrap":false},"1.2207281718.2":{"name":"@bentoproject/lightbox-gallery","version":"1.2207281718.2","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.2"},"gitHead":"b2cc07c9f0ea3633ed63866b9243ad0bc964dfe1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2207281718.2","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-mH9GmZZ+UGSiNMQAP9U4K4ULq2CBYOJTS4l5wbfqh2TOeH1co0kocv+K3iVv7MGyKFLL3PfJy6IAcG9hrTGt7w==","shasum":"036782901bce4d42c5c3dfc6b746a2c53cf2ecfa","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2207281718.2.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCml5dUySjBq3YqvyuCEa/MvRnIgW2HH5PDT5klIy6kcQIhAKvikGdUWgJSY2fhgcZFgoB6uVAibqHk+ZKTH5uO78Mw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8/YtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1jg/+L0Jp8xvWWFzc6ok6VtwBMWuLbpd3IEDnT3+OrWB4zvEwhmiW\r\nxcTiWtx9GoT11SIJ9IBUT9vYo0Fw28ykz43+1jhHjrmuJt/XASsp9JZj2aIZ\r\nGDBb/RuAyNs9rqGaxDh1XtieGsAb7RhOegNx1nLwUBii+vYZwbul85fxrTAe\r\n57jBnYDGN+77k38+T1AfveGQtZCuf4uVaIlYV9BpTWSJd/HfgEnnnKGL4PAN\r\n5HzJu57hUwSkDu/mo+Z1AgPMQwkh693hV1F7Mote/fnhlddsdLAd1yfkmyml\r\nFg97XZJiGOeQNa7bWpEXjAH57GnpW4zkR5ahWmg+m3B+oSlCOx/zrPjM1qwL\r\n8nUwY5GDbSbA/2e8wNmVr8jVbwx7NQ9962+ELtcHE9AEB1GnXCEyiWMWJRTL\r\nSnxOBv2FpUbq5XxA1VYEiSmEbjFCZWqQL2gbzwyomPHdfpg5Ev8K9wPCHz+M\r\ngiTvq5s+P+mCbVdO0p4VYyqYxzWnb6bTOuzXo/fQ76q6iPERlpieIfW0ukQX\r\nWuJ/n2JF4y4AnBpYEPeYgKOe+bsMoqpkxZBSa+uZgq08WYM4Yv9ZlKxo6RrS\r\ngTxJeb+4EbLutrQdMF71l41I7CBdelKBWcfgMMnl/uLBFODjnJj3msqlM1+R\r\nSmatRv2vC3zbRGSJrzXOQnpi5eZFSkiTBP4=\r\n=ERy4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2207281718.2_1660155437336_0.22674530650477287"},"_hasShrinkwrap":false},"1.2208112015.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2208112015.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208112015.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"83d345ea27d61c78ced5f68848c4f342e947fab2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208112015.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-yf8Eyr0bYuDMeDwsj0w8Lkq4xdvgfJ6mtSOT27XjhJMUkzaE6iewvuGP5GcolG0NTZWCpDaxfqxXjZ6che2FEQ==","shasum":"0a24ff9fa1a8ee9daabbd7586541b0e48383878a","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208112015.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZqPWHBtyFQVA5itgoRovyuSFUF+t7kSp8jTusbWbUVAiEA76ndaIeO2q2MupNWU67jyv5bsabBBMJQXk7gH2VKMHc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9g9eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT6A//YfDj4/AYs4d3rDg+BseWd15apeAv9nRSmU3Ei2PeZ+dFvWyl\r\naAhURPAJNhqLhVlc3Ivd8nkj9nlxDazNlOOhh6A8tTmDUYJtyWTS6Buij26L\r\n5v4qh5bgSSDVXiSAtbzOufK40RrktPYsYmHKEU5/3HgOtOn1PyND6x3c77PT\r\ne9DBArLuxdOzCvzE2D3fz+EXHFe8GQoWmbHtKP8maftnSaxEsITL+A4ZbX4l\r\nMLrUOBHkA/mrQsvBn7m+xgSwSXoSBkyoUMnMEF5cfFVbDkeDx/IJP2qT/oRz\r\n6zA1qajfNOeZaRO3nQrfKKaUV9DqC1fCEfi1fzTDxoWQ4gUQbpAafEBP/blA\r\nUVQGjjWI3cSAz82K9jYmLvTQ0sLwy5UCNSLpgCgH0Updiq/jVhDJn9ogPpWI\r\noAjz5uteFkPObAw/IuGHeAnMFhLsTmFXzJKyvy+qVmOQyvWa9QcsKd/Zb6ER\r\nmG1QZZP+aNONJRDRrU9kdWJbMiB5ENl0bHhvPtN9cRlO8NVj1v4aUC5/c3D9\r\nr0yHaxw/9iw1WjDpYnh7Ac8xphFgJAXuhLy6My62PVvX/4Q/6Shpu+ucys3E\r\nUoyL2HhvlDANZwqhi5QGtVglIqW3FsgmgtdbluAoJ6QXDU8T4SrhHhdhmGsA\r\nt3BOShyEz+4iAUfvGBL7WI8HBj9R62IcnL0=\r\n=RklE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208112015.0_1660292957770_0.4348593486104737"},"_hasShrinkwrap":false},"1.2208121708.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2208121708.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208121708.0"},"gitHead":"c9c6de085436b10c2fcf8e6c10541d6d2658af93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208121708.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ZfVGIjepteIDsEOuyRlkF41f4kQQq3nZyWa65TsU0seqZMNhpxfb2svr83a8XWnp7ZeW3YTTp2ePFhyMpiO+2g==","shasum":"707ec9a7edeea28c23627bfb0c468a842e45a1fd","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208121708.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMyj1mI4d7Wf4mEdwhEqQ8PyXzxthKNaHNPgTGyuiM2AiAHBxaFSPK3BzEzrCRlDYBVa1Cx2wACFIIhtSHVjQy76g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92CRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3Mg/+LRs2GioHGNfVGj/IbPi/SJulBCplFFLAptivini2ImfBZ7CP\r\nBzntb0obMi/kE+xMS2NSis7z4JphlXI+oMh6vGj7zH1MXK07lG/lGeJxDa/o\r\ndhSd8c+CXyHQkNbj0Py6O+oEaJ1d8MOIf0ZiZoRAMI9EbYAeqqu5ziAGRQYY\r\nT+F5gJMFxCrvYuumistANy2DBVyLZgRBIoHrDd5HqIMUUx7S6x7Mq9bGTYCa\r\nGp2oULa7hgPdduUj3rX6uQ+5CPP7JNzE7dalyQptSOGjB1WEw9zcT743gNzV\r\nvLtnccyRPUdc/V7odUmyHD8xUO6rKhfmrTUhADgGb97e091eG99ZYZDTRyXN\r\n8rTLUeaMlgDhW7mXHSWGfAmpcYr0izAgYQfut8P26snL7OAUE9LGavGDpm9H\r\nkOZx8o/iczMTg1HPj6B0yMYp+6MpYKJktXi3u325CIMkGcZG2XE+jdRAy6QX\r\nyct7cksg9Mdl/bSnpHTn/m2XOkdQC4eKJ3KxBSGkrevkT0EJTqT/sbkJnmXq\r\nyIrTBGkrqx0HUUUlcaVn+0jOo+0thvAsLy5nUnkaMwRQlDYnQTKDaDALn72p\r\nQaNcCS8PyZs3husSeLrWZ+BP6e3G4kKmr/T0P0EfT207tlSBOUMFeX2VEzUu\r\n78J/z+UzcpTjSkBowNcPGWw3D6iizJYLsyo=\r\n=ZR1m\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208121708.0_1660379281545_0.09767288060697954"},"_hasShrinkwrap":false},"1.2208051912.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2208051912.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.1"},"gitHead":"c9c6de085436b10c2fcf8e6c10541d6d2658af93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208051912.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-1l+E5uPte/JviNFcySqYLsRh2X5UxjtCMbO2j7YLkIIy7y44QxwQ0qm9xzdV6UjK9J5Vo6jn15/OfJE2pQ8EwA==","shasum":"a25d0a7c640c71919edbd3d5a5540ec3db56b253","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208051912.1.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPKVtHLzKBrb5wAm3m6GwKQwsYtsgBKwMqQGn5QRqdKAiAhJXenN45C1KZ51IG1jYxcLtcMZ63wjmavJ73AMaEHRQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/CMMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6uQ/9E4qpzo0qZG38Vfn/JPpVcuOclYydB3+GTcbpEte0dIDhQnGx\r\nZq1ecvgTM6//wqBrD6K1uLKEUpnOgTm84JiA6kcko4u+BmQ+VIvRCiGerkNN\r\n53stok+nxtOM+lOxm5gsWyQ4cWPdnDNDKoKkJZAKcVgo7u74KwH2SjG5jqgv\r\n4prswvAcMi5Jirr7taqf3IKYY3RuENZOg/XsFBn4bP4vwRficEkM59Pl9KgF\r\nPgkAKG8yLPOsEIZ6dXlm+KC16YiRIINkUflOBSnPM4WY2clz4vN6l/b1Yj2T\r\nZy6t+AakU+Nq97vD8iUF1eUtgNicuMsRv09CjY9B8knPeBIk+c7mL+s8xS5k\r\nc5Gi6+MqBYWCTSV4pKRQIAXLRTk1gf54NFz679o5MNGDah5iKULpwLfRWJ0K\r\nDFMXLQv/aavXPdRB1efWtt0qK6BapJTobuVWynq7oeBJR82oApKm5vILKnC3\r\n2130Fp7oeFMmvZQjfbS4v4x9YGToVfvNr5TIBfqjbAWm493mvP2E6fGIhnNB\r\nefjXzwG/SUklrv/fLnhD+1Gcgj9LYrW6MTAUh22L3Q2zovr19pqyibNE6ile\r\nv0t3az+Kxzt0e9Yq9u+WJSLhGWjer27rnYnvJ3h4IlLVY1rMROSU0iye0MbF\r\n4AaVWikwykkkeMTvwfJRRmIIM4qiGCK4O2o=\r\n=ixbD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208051912.1_1660691212297_0.9458311345563233"},"_hasShrinkwrap":false},"1.2208172101.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2208172101.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208172101.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"372d5623dc25138bb97bd48cd5f97f3be8008658","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208172101.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-YgK4URPhn55cFm+9Np7UbSSpmKXv1+bx+ztCwlkKIVZwd2bO9rZcT6Xjd6O0dYheuXS7d+ZtNaJz9wgArr2/Dg==","shasum":"9bbed52083dce1536b61e30c31ec557298ef8180","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208172101.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDdiG7GkGNd8evBIhqPJLCWZEdYr8eHGrf8uy4dAieMBAiEAn5d6EtHGQPpDa1P5FrUaW6+R+aNB+R0MxDSKJTUHoHg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBpCbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWCBAAoWRWO8I9ikSNJv2tTTgvLcMrFNtPnM/6lh5Uk56ZAyPP4hnk\r\nOOPRwBobfb0mq5XT/3nm0JGQGZWv3ajlDLRQaxX15sBxa6tw88RDzB+Qai39\r\n633ph2IBqRtNiR9rUKKo1Ng2xrrKOVSNFNnwyeDqb0pKjr4YjsuWFDPvwmFF\r\nsgYaFGdaC8e0fPy8Xy8oWb2x2IvYATTdDPId49amAi8Mpp+6KyivI3UDLRJk\r\nvgs2OULEhnQV219ITip2GwPImtrHfCOz8cDd4u2X2RgjYKdzmXrbBOtGOZ6l\r\n8khasuQXUxVL3benp3E8gG1w4jDPzXOj1Msd5qgzfASKSx8TRt+YxABT2l9i\r\nTuWwSqaVwMx2bLxE9srqHVCvghdPbqNhRv5b7lLUmgTsSN1+0Ok8nYeh/f83\r\n1n84J4gUM3UWtiaUFtM0XU1c7MCXZsLuf2D6ETL+ZIyPp1PZtZiC3XGeoUXN\r\nQg5hd5skdVe43R2QXqtcw6ttoTMF7oYrzVTy4Y9iR9v/D7xXbSwM3qwybesN\r\nLTzZxAvcviFguLEn/YNxAOPP1lMBIGE0XApUmePPA4yKykHWCO1DKjX4156q\r\nougZZfiqIzobwhiGSnQeIreeBrz9M3+RH6dWAxN+Mc/7fyEH5QSgSqz0aZTr\r\nrD3CWBDxvQgYY7DxOXB2cC9cAVMR9AOk+fI=\r\n=8XNP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208172101.0_1661374618901_0.5032543596284897"},"_hasShrinkwrap":false},"1.2208242209.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2208242209.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208242209.0"},"gitHead":"0775e3db3f5e3447749a9de6b4ef38433f6db4d3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208242209.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-mqeKyZ6WvDNAGF5Rf1ugs8F4+kCdxHh1eDSY0t7sMr56ATVyBz2z79D8zW64ngitzB7L7Bbp41RxbvIuUY3Cyw==","shasum":"abf36e706bd6bf4f79a5b9dc36c632875a6bd9d4","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208242209.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBm/AvbjV3QKJ+l+N/L6b1CpvNNcNx6PLHqww+T1laIdAiAlqtRotZo0vkqm4YGsT9KN9nlsZzKW4s965h0auWyt8w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBzK7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphHA//eAYlgTmBL5eTo3zCsVdM5jN4FAaYVMoyc1tbDmmnD3qQzDHW\r\nBKWyH+ssqn0cpu7KIKnFk/y09TIawhktjQbUa0criN/z2qmYYD00jwyn6qAn\r\nh/GO4KkNx2g8nXdyFKHXbOWyRMA5haU54Yv2Wm02mbeHbxEb0bZNfvNxqoi2\r\nVaDM3PoDZhqQmhgeSKbOSvwypqj/fRwE9RkQu5q70FGzmQ9ynmD1hWPzN866\r\n84osfNGbun7AVEWu0L0sE0AkdkcImibITsg2d/FH5LlRShDdrpSHaivnpAzQ\r\nQ4TWM54i7eUELKF66LFGa+VCDBVIHt0ZTEgRxthU6/YCeyLJaDcF9dQ/8V8g\r\nWNmLvFcSuS2//oLxoBhvxonprnc5U2PsFuRLl8jrYt9CA7Bf2s2a9C7LWQsV\r\nTz1GFEQAyzPkt2JPT8p6B2YziOtdcb0cPx50kZIwmmwEqczXUr6BAezYNtre\r\nRe7S1KoqH3LaZaFRhuUM9OL8S/z+ARQ+bjHcqrbZ0Ry4ctnXrSH8naJeGR4+\r\n9Xb+AO3SbEXjUyNE99J0M77sDb+7VOSR2PPZ0Sg0TpAK96elV5mW4nclR13D\r\nlX1MnUvFfBO0wSoFo12NmBlRMjIVRh1uL6eZt8Rz8VUMoi624UFAhtG9S2hn\r\niCP8rjMwKP7yssfncZPu8+70+ewemy0QwYA=\r\n=UW3Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208242209.0_1661416123178_0.41503389095025955"},"_hasShrinkwrap":false},"1.2209072154.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2209072154.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209072154.0"},"gitHead":"b0743385edcd11eb02b6e380c4fb5a18793960fe","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2209072154.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-ihvLEQcEwaVNIflI688q9wo1SjhdejowPjDfi2IaBWcFhQzlP59nM4W1lSwrJzSYFyj/zKHYzODQo5+GVltNbw==","shasum":"a092569304c358891547c11a8b97e39945af9ade","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2209072154.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyp/B+xB4rXYQbeJY2KBVLNj2RFIqqSCLyyx3enQxjLAiB+2LDhVhQ1xGGR1cA/0gMGiEuinD3BajE9SrG16UM9sg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGaclACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMhg/9FW4f9NNeJ+42j16SbFgYES7WWrNo7/s3nEBwm/I16BrP4evW\r\nsBv3dE5KWoZS8XwX9ELcJL1YckshE3SEedRi7M1f6XX5vrYz4GrT7fJ9gtJC\r\nndtunF/dkgyTKtFumwFvTljXxgc5HUO0ivEArl4oehvaDLf5K2W6FVsHBwkV\r\nuH7hO1JNA/sGJ06FOEg20fYlMgZHuI7+mobrtWLvBvAAz8JL8yPgeQbCVmZG\r\nj2HEzMy4XJhYb/ZmEMkM15VYBVlf/7NT6y6IyHZZTiY3otamCXxwjgmqPa4Z\r\nyRsSXJYmZ8CbktCCAfpC1DxWLqkmXfUpXxkNGrVau5IhjjkGjDrHgxpoN/az\r\nVr88a9T+ZIkwpLAs69Ba3C65fKx+D4cS6IXQOmBwvLwVeniTDVzEek3GfNnK\r\nRBkgOU3zbZ94yEvKhQrNs0D7jYPfNtbmFnsp/O0NbPqvEG9G5U0UPaz5QUcI\r\n8QgIKNn9kTzEyiSZWX5DXNKvt0EsXzH5I5Do7Gq5dS0M54t0M6CXTEe5V0jT\r\nwaKGEVLdUHwRxDYpdf+rAqxJ+2NapTN1Kbr7wOaAZ8vcIjflE5Ww71hvBTXP\r\nfKRZM2WA27Q2rMVSPWb2Djp3aqUDmIiJ9lj+puQSNgPko/O/n0NFFsS1R0Z4\r\nQA9Wyv36+dYZmB7ytFLzZbyqpXLzZtuFTIY=\r\n=S1I2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2209072154.0_1662625572951_0.7140984884305619"},"_hasShrinkwrap":false},"1.2209131909.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2209131909.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209131909.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"b912a3976adc47e6a81ae645cb98e51d1e778150","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2209131909.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-BRGWA0S2jzv9ltEHQadq/HWzgbxo394Mhm/bM7CwBKHRA3OL1nrTsCeHJRrlBe5f8BbB7arajaDvrsu3rwyx/g==","shasum":"d8f7acef5e0fc931429acea094079a035c418a1c","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2209131909.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC71ZS4q7HNkeqfcUZfTKz6l6ZRLCjgqdxG5EIAZZfyGwIgboCUPnIncQWmmaOqdOEvugRW2KuJ1Dw4UGB0T6hPslw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZSgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV4A//djnSdIZ04skVJXyJkZNXXe/yfVkqsIYutRylqn9h1lOQlJMv\r\nwOC0q8828hSDNNFsud65n9N+6gULikyc0bqD5hPopO/sBWtRuzdzbVUp2azm\r\nqR7na6xR/9nrfbbohlo/s3rZxWsAH426LMGE6UFd+/SfTUD3dxm0cMqSvs9Z\r\niunjihjuv1qjftcktKuhrNQ6t5EJjcksNrvnxB0B5Om2iCHIgpqlQifPWtaj\r\nIz3CRJ8hgQlcydOO9x0yNyROtJ48nyQK23Z8noCJkW1RxUqfrNGeWfvUdx/c\r\nJtTDP1LErL4GWevA9OnuqzjaIcUoUeRuue1F4AVvgIVYPmMaiuARO/pZOq8l\r\nxDRUkiZYR+INekDAa0bP99Mh8Q8MgsUkCpE1CqGZiYXUrnj5BeDn0RtNMf2J\r\nYKS83A4SdLeiupMDqar1qsaWSNO0FEi8Zv3c6XfrTeu21KzcY8qFu3kiTqCF\r\nFtbQrOM8opvy3xKzbV2wnwI5J3aoSZWNkqrMn5M6YSC9J0xJ4/PsiVjW8+Yu\r\ninJWfX+DTBfq1GWDmBbaMZzNOkzeXtOaZmb+wCRQQQxji9aQxGbSeZ+qPVHa\r\nwfODsUXNaJ+jGtcfZP/Uh5i5ToeEOkilzUVxCWgP5QTXarBd7bBkTSKsrpPo\r\n4TI0jfOIq618hsRU3MfXUvCEB0YL0+rHnn4=\r\n=cbeW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2209131909.0_1663145120511_0.7846033473463951"},"_hasShrinkwrap":false},"1.2208242209.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2208242209.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208242209.1"},"gitHead":"a64b6c7fbfdfb75c935b112118bddb3fff58ba57","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2208242209.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-4vV4+AdzClY6/pnC4UsHKsLCa8UpkBjM2rY//QWhXfwd6cz05/WjUi3TqSpEF0URCSB9GowORGdluTGvFApJUA==","shasum":"a77caa525f646cbfc94c9972d8bf6456e55be100","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2208242209.1.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfzL+2+ktxzXCSdccZlcEgo7AxZzVxIdIKJyY4y5eRnQIgPdrIJsuZxwTQoKg2hHUxSKkdf5H1PXI3+y/csrI2gmA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjI1ZwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXyRAAghrzZ80bD9xhKKsF5tmyHGPtTMAfdHmslQtVS106dwW3M/6R\r\njpNRTGLkTMhPyncPTQC5Hid5QF7EG80hlp7zQwjKBtzpcmYNZSAIPc4rzmXe\r\n5IzXJkjlOp7xlJAtPhm0Pbh0GoLUsYYzT+ltmQRSLkUwA8VC7QJIVSnMlo8K\r\nLCHmd9CYw0XFPitUocAYWaR+z13F+QoiVlIX7rzK+4ybEMMcylW5U+7tPn1V\r\nSQ2FZucVOwOIPN0HRYG7z9SzgRKgphhgwIQYdI/3g4xdxfEvhy5JrNi5Dm7g\r\nGPy4ZhPDJUwPmahMQBR1OyrXopzXzXMX3LKXNE8vie0T3A4qBzzS49K6AuG0\r\n3kgDyHYSrqoaqqXlAQBsRlrLZRbxNw1AcbO2cMFP94sLUSFadUN7/ftvt47o\r\nuv+WAoQxpfcBYYGEyHN+NNmngxidJJl5QuQb0YS7b1kA1LowurOz27JaVQFd\r\n+0T69M4OgSMDg5c3Kaf1u68SS2AzXzcp9N7AYNnZC3dl5GhrcLpHcFwx01O+\r\nGWM9YF6wHbooyrWQr50ICsQExG3V3jIX5Al4uPsgr8+lsr1IZ6zYhOMiQpm1\r\noB2C+4LLolj2Cuki90gj+tT+fl/9zFLME8RxGr393yqSnwYIcOkxpWwi6cvl\r\n82S7bK7ct9D7mFbwMAZHHwm1YCl4d04fwOc=\r\n=Z09/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2208242209.1_1663260272207_0.2775322458254894"},"_hasShrinkwrap":false},"1.2209142312.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2209142312.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209142312.0"},"gitHead":"8484b3b1dc31fb138a231b2368acfe2cb4eb913d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2209142312.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-9DZj/EQ0yPhyt/HEujQfUeBsX8ABelvGwjh2coM+ZfdvmYeZzoo15tuMBv7FYK/9LymSQrk9u7NqEZkK5tde8g==","shasum":"0697d4511c7171d955f0d0ae090a622bf79eb01c","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2209142312.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8jFys9RG260MTEFhzZ9aoItFbnzn/Bm8zU/j6ROxfRAiAlXLo6Tf/mvrpChAKZdLtcboSjKPbB2Gxr/NHUhXvzOQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKjn5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMCg/6A5g8ta20DkE1rvktJMPmCGcO9uYizHl8Ci+EfAUDb4cmFt+I\r\nHQN+VkL3hZhoTQivxjL7XixUQ2E6/CNQCcdLbXdRsX8BLgx3LBYuIReX0oNM\r\nIheIRG6y7gXaEVJZqr/BPtUWgtmCjMHpUJ6FNHMBMpqnHdHbNG0JUOUoGX+O\r\nHkVwCdfeIRjNB9M83q8gFg4ehtV/NVrxDYm+at5yCBpb56QEEoilactjyoTg\r\nUb9sGYB0sUjegUYg15pF3u0OBJstFmj0UYblFIKG/8Hhwi7cc+b4p9vQRDyv\r\nOU2snHVAiBkmk3XLtFjrCLgMKkoNJxXHUQTO5M3F1W0snU7KEJpATZXe34kg\r\ndB3HSQWwOUPe8ICqF1YcRiimlddzX2BLuILjcf7eymDLLGqeuDkWnUghZAzb\r\nDCt4Nk0q2ePgHqm1CZm7LS5QmPvSm3JU429dtS0lqRa3ikLJ3On4XyyzNGrD\r\nOkJRKmlF194uGU4s3ekWTIIPkxqDVMSDlo8rX7vJ6Q2/cSvscAedXqBgE1tl\r\nLuJQx21pNCpbgggGLbAxHEA7w0beaneWKtiDL0/HcF0rZeS5qNyfH/58vXEI\r\n4KWFDbQ0FnYZs9S+MsZr6MPy8pDPSxRxu4H/8Ph8kT69k1DAou/fbIbe553b\r\n6k2va3+IkkHvbU2PL2t9SEdaCqADi/LZ8Mc=\r\n=XIoo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2209142312.0_1663711736743_0.3651091420746555"},"_hasShrinkwrap":false},"1.2210010655.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210010655.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210010655.0"},"gitHead":"b0c5acce5be2019b787b6f4bf7feb13b045ca7ff","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210010655.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-UJSybrjsRa5JUtDN/e104Cezo339uXytqzXW5OF3WL/s/j/MxqCzlq+8w9Bq8d3sAvYD6GP+ciNbfaUogWBkZQ==","shasum":"5b62d708889024aaac0cb89a0ea441e5d4198829","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210010655.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtNjzxy3B0Lcik0VYZwYaarBftfMsgBwdLvSrBBOkGswIhAOc2FxjbwtORcsYWr/ktcURzWOvxAXbGO4hZS60mqzTi"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGSTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/gg//bXGn+QThP+mrSGbDUJincEFWV0yxCeRGejGr7R0pcKbfsCvh\r\n0MQqWmFXKx6C+FvyCBKnJRMZ85L6BieH6qP22Gwomn+UNpmLxPJ/Ig33JBmW\r\neYzOHSEgSRO9s+DsrL+u7LSuTfxHFVYWt2QtKEPtP6rqkhXUaIltN9y1ndyE\r\nbE3QTce0ksoeC84Eqm+qF4EObdDaJx5t8j4h10AB34NYWq9SMvNApNlAKXsX\r\nFU5v3A1REUFYBDg37wtJ2JeG9lMCBt+DtZBykyzoVWZxa1pj4OiFdp65izee\r\nbXEFEBjnJLJ31gq0XtaQvkM2GDOl2BgSKOM8+eWNMxoavpotAkTW+Gmm6/w2\r\nQ8jw/Ot2UzJD5UA4F29tGO/x47VdVMvFSXLaw0w6NjgX7TzP/eQxv7KeD37Y\r\nd4Lf73ySZ7lHuq6J70dZmoUyddsGLNMw7vgrlKtm/U0GtMVRh97srYpvLpRu\r\nPJI7E0ONNpvwLPECmHLaTly0rsmzgTK0ew4w3AVUGFZN4sfmmsqg7gFzmkIH\r\njniT0wDJJy7NJXh4BhuOm7KcEGp6JDV/XHXpmBFJlnHJX7bwInkiwoItLq59\r\nl0FhJt4hZyhmzNEmYVtRkwUh2WUtt298y/SH+FHRCBGXVOUYeRSJTz2ZmcTB\r\n78y0DtyuMmReggIKCdfFeFm53H7EQk8AwLU=\r\n=S9EE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210010655.0_1664902291163_0.7279127559870422"},"_hasShrinkwrap":false},"1.2210041838.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210041838.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210041838.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"e79aecc1c4639b06a7f2843d961bb14f293a53ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210041838.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-sZdFqAgeKrrpcFveQkDGRQBz3aRfu4kxhapMzcrLs5GcBR4i/Hc/DapRhWTY4q7rVmzGO7GAKhSxL0354EFGyw==","shasum":"49be3c5038155f3617a1567312ed4872ea7e39a1","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210041838.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIApQWeQ7OIodUT6dISUNk7jCy+cC7+7v0QRaYdCutMFyAiBQfLcwvqFlnV6BXRiRVYcoU2anzuZ1Oj9XFS9YE9WwWg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPUDJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGOQ/+MUHRRAjKvM3KaCv+SuCqLz6hugRfXrAvHLd57Q3vOG7gLoqS\r\neLyztTV9Hhr8DJI7cabvIDiuHpP6MQwMsMQSamGm9n+Js2mZum/XIG6RXyqw\r\nkvkUgztFspdASFcu/XfAln769aLyrdVCNB2OpCKV/KuLBeTZRAzWyuwW9pvr\r\nlYHl+9fJXq5mXf+aIuE4bk5xjb/e84URJghtITP2ZyPxlFTgi7+SQLdB4IJJ\r\nLZt1lraFTKh+6y2LSHpcq17mf1W+s3uQQAOWS7unwS71s4/6xTW3faW6SXSg\r\nyIP1YpHOr7szGaP8+EGN8qBPImfKE+45wsmT90X0GPSmoi0PG5HlSa+rua+I\r\njclzlbCpWvEgfMh30GGc5pkwTXRdGxFyybRnqGedy0PoDqAOfX8giy/QLx1e\r\nu92nzBjaAe3ab6QC6Qu+0HZtMDwkMaXLYM04PMNfY3lB64Y0CbjefQNKFrvd\r\nBYpF+WuvsFV+UwFCvNnbVLi8yjB5OB4xE9v8kViSOResjw352+Ftwtn3LuKO\r\nIbeN+vPMfJlO7nGKWPcQlWtjAqsqugRV5Kd60d6e6rMz7OQ9acNMv5epuCYb\r\n75yx+Um9a4Pv0aFx9vaQ8uWu/0rS1Bfdg0xqjcf6tvNyVuLNU2xId5RhTLCK\r\nZhfXkJsOMvUK//NQDsIFz4rtPGoQco/3yA8=\r\n=yGjb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210041838.0_1664958665461_0.024824149961784947"},"_hasShrinkwrap":false},"1.2210052034.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210052034.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210052034.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"8a0a0067f57f89d0566ee1db3d4bfeea072d3c56","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210052034.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-oOecn1inIM8wVTCKhy85TskkREKd8gUB2wCRp/dtB30OTVEXS1xEcvhcPopMfpk/N531v0ZgbnAp3ifCBojA1g==","shasum":"3ca926bdcf67e0bd73d2e2c092dd539fd42ca7ab","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210052034.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASPv6Bfp8AXcuGIpcN744xfoOdS7ZFFCuFwlhXy5WE7AiADVTqNgzJ2TJel84nGbsPcvmRb9JnF4+Blo/+qwia4ow=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPpF6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo46RAAgvTsNKvOBVZhuApgqDYyU6SYZdROsm8FNHuUX7V3qnJSQEdZ\r\nczzCIVinGQMkH3i+r6nROhl4Rw94CBmie0ztO+bIIRFYjqcunkdyM4LwsncO\r\nkg9u5+2nM/pbmn84hP/vE3ZgYSgm7YfgndI3FCV8AkkgFt1htkrLTPGVWmLZ\r\n3zHOzl6Ik7BwwtrO/Gn26mCFaEmJtddwTfFWBX02QbvSYc76/EdqJ8t3FqLu\r\nC9uRBnaBfNmzW+imDhYZEhCzKcTnJPUO3TP98P7PCdbXkowImx2N8FNS356l\r\n90oQRDrR95T3opA1LjxaRK5UnBKCCswBTZi6hvdcnTCCvu9SCLUHuzRzX2qu\r\nAZ38/7sB1H2gVIeWPc7sfu86u5HzLZDiShEA/upKwrXfPia/e+jbHYUpqF4k\r\nfLwu2lQuZ3TlP3LRCRt2v0NqVax77SDMbxmkl9BY9koBBNiDvDtr66DCEebJ\r\nuJbthQ/dg1csYKfEk1uCDODKUJ6y4RLvn+HWqyHf7vII9fyliQ69RZKmyOhK\r\nTfT0To4m1ePcNhZCmOqNw1C/PVXhTzfw7wNoJyi6OFVlfHGv48naB6HMkBON\r\nso3/lrZjLALh6Q/AfBiJkhwynzxJDIA7sTM/WTX1wQtoCU8GEaLFJXfNFejI\r\nnr+bXzBxBn+j+SQOeEJyFOnr98vcybSEzn8=\r\n=lVvq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210052034.0_1665044858161_0.4775117828012445"},"_hasShrinkwrap":false},"1.2210071758.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210071758.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210071758.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"7c969ff5fd5406304f6a9867fa0db59b74e94524","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210071758.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-2b2PHhh1Ft4zpYOKSq03f8wZI6ZPBTx+osQIHrmJCtNd0grt44L6bIVEwfC2loRNnVO7na4WmnpE9ZyBljrfOg==","shasum":"6058cc361c007571d81df39d4c37be8014d186c4","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210071758.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9FVga1KZ7rKz8yLaAwJDS9HP7TXz6hchgj3ZgUhIHdgIgZuOVGVKjcNkWEfBxk0wqxKNtJavDPE9Du8errR6NPGw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQTRNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgDA//eqGWfHjslSZHLdopdZAUNuAuAv65Y6bhDZq+7v2nOLgr0+5v\r\np8GW6xZ1CUiL0XLlA0+vh7rBKBv59wRx52R8KrRO4PkoGFJ/Fg/WcAMqVI7i\r\nDhb+ynhu4pGFmankYM5NpR/T763cbb5L7oPaTyEi4QsHVGz34B7Cw9IJN5yr\r\nbK7bc11PNLcNYsRoi2vGH9YchQxw+YsWHKHziW0CjqyK1FnrSMf3xSD79RHy\r\nTEK9rfUNi2361j4g9DmSrXeuBsstlstoPSnZ+/h9WvespUFyeArPJtIU1+xt\r\nrSWaGGLAMmP28YpJmIN7Kc1hZGeSZ3Y+syTAYhcMG69L94RLP3IoYvY3s5C/\r\n/S65YdVTRZDaIqIkt7W+QW1h5g8B893BC6wU+E2Gxj62RWOndym30H/MCxb7\r\naFksTTFq9vWihzPgMz/dVtU2Rg9ecchAiPL5VGwKjZjEGDA4hCZ9McpjloTm\r\nwUi81RMdKkHhG/Z5IfnzOFSbgNsjKYbkOv7NMkzRQNJJmxw7kVo2Bop/BL9R\r\nCS6Fr6wLBGbw6s2y+s58TYC3BC4ZONcNE/0pI24ZcVQXzs1kaqaXPNUwxoji\r\nHNhmCmA7lb4SnY0Wr3hEGsEO29OEm6kzBQpbWAYAhmEIp4XN2MKIp0Aowt4k\r\nFL9YwA9UtZiNgX6bjVwne1XJW955C917j4o=\r\n=jkEv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210071758.0_1665217613416_0.5648931485301172"},"_hasShrinkwrap":false},"1.2210112333.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210112333.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210112333.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"1d82bae06844d5413aeb632cfb2f3ef443548ad0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210112333.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-y4UmpFt1GA67w5cLHSZAf6GLnQxSMj8IHJgijuM9tGvea9IjuDCwvRKdUEdOk0mnMaW8ESqJ3fY+0naocMTQAg==","shasum":"5c4ff96247228a78f1cb9d66bf85448c887615ed","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210112333.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8g27NK+xf874WhNM82y0kt1/FnWNnL7I9ymU8wI1J2gIhAKn+DhnhxW/Php5ueg/KRx+sQ8NkJ9ASKujLcpzlU/Qs"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRnogACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC2g/+JwK5fM4Deq7Gn7fykykeHf/9M3vL4dL7ih88gwXPwDrtuCF2\r\nOytdefTlb3Pr6bNgsW23oO3vMfJDRME/bHJeQFPuedNE5EawMDXQSYrG0zJT\r\nfHjM/Ekdl/5rcyvOkHwYDGP9k45gX4SFGfFtJS341EICytfNLJxPfmZucdmm\r\nQTunvTL13hGVB3WTvDeq3+Ss0zxOH23gYQiq8v00C1ERsc+A0J/9Dm0s9h7a\r\nv7Y9WCEU2Be4F3K7aTkb3xcMRMVCdyPHCtWAjLR0ZiZXAXZieZzEHXkOHdb5\r\n/OPJotgLSoUpmYbXkwn56Hkr09yHZVciaz81jtj+skomyDn7hHK04Quz5QVU\r\npxSBOtFWocY/pprVgZSx2NuSaiEiFHchvYsMeZxSfSX/jCvkOxSz5E0bCGaJ\r\nfuI4AlIrpBouoXTEN93pc1U7e3fnV2/HFGRfRv1QBtje67m9OzA4EME1vbvt\r\n1SOtKZ1rPmwAtBRynm3Iz08P+cB2tP0HqDz7/mXO/76c9CQ7OBCihcPobsIk\r\n13bxhHHjaGMcqFRsQfkZ2YLvQwJ1yQHTcKUs/2ulQwP2NjYs/3yBQ1YIGg83\r\n3PQ0vwjVZhbHOUvRaJ4hfAdI4lvAJjQgmYnHLvXh5IszxwFSkzLlXN7ZrP4i\r\n+KasqQnAy3ux72g8M7aT1MjwMlNTlWk/R3A=\r\n=JCiI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210112333.0_1665563168261_0.141828877816345"},"_hasShrinkwrap":false},"1.2210142102.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210142102.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210142102.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"4cbbe2b23e7b0c5b0c005c94a574ea48a45f7693","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210142102.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-XeW1G67FmE74BvIsMvHMbCEYahv9fEVv5JVun2k/s2Jng46zpHe8Q7JT6FdlWXPbj9PUDquLq8ThvzL1QQSzWg==","shasum":"be9ede1fd91858d7176bb035d57de834dc61a5cf","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210142102.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn9Ow7oQwQ67TbQPrbQ80UOc0qQwqkAxjamOTs1HqhdgIgOEmSILk48pIFc2Mn07k1EPg1ukbc84SDpwX1HbKNl9M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSm6hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXIQ/+JA8CN/0V/ygg8IqzT4DTkV5iPODxpZf5ntJJl5KQzgzF84Yc\r\nD1jsPeYCS8apkFz7kTwkiHVNdXUzwZJASTk4AgalLuOJsivyRk6G3goMJ2OW\r\nabVnDhf8McL1rk96640namV7jf9n0WxmuZNqxyQDlG0/w27N9lgxdl3XCTFL\r\nDlytWIMmBm2bk+zHX4zI/ZlFdobSCLHsoay4mQR7ZkTBGEQ32w9HaDba8lv6\r\nw22O5Xo5KnQC0HxQkTk1pI7WKT269r1csVMQ+WTnOMbq+991mWonftlBwdhk\r\n6/ZdJV/X+R6iX8NOgGlT6ahLyvo0d21fJNYLWIQgaS7Wyo6eKYdLDlY3Eihg\r\nGfm8Eo6C817s/KHBLtL46prz+YOF66R8yeToYM4u7PoWx2wpUDrNo0cmKINi\r\nG1KDnhcAriS7r+tYiBxPnmuhGD/VVzSjcK+oSo+71PgH4YY2iXXrak9ZlGPv\r\nW/mnLZw4+OyotKuUynIsigY9A75pa+sH/iChgVfc4sqP2nc5Z8ELlTsFlLs5\r\naFnZFTDxMQU+FQQAQuEc8pIUAkwY7JonSqUv0V2QFPrwEHDcjG0V/HKxTVpX\r\nsXt0uyC96xQ9wsIfZ355lQmil7uDiTMVBthxJiH9EkpisGi6h72eaxR4qPha\r\n/FbyPvfCypexERH7HXDt3aIQuY9yXWyMCAA=\r\n=iE6u\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210142102.0_1665822369523_0.7431769289609926"},"_hasShrinkwrap":false},"1.2210172057.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210172057.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210172057.0"},"gitHead":"fde225e8d98aa5d96a939351e6e53cc7abb13cf6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210172057.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-BNh6mAd7O5eqQ7LanRO9A6zPx8bj1tROUIohkZZpRmZ+moMYvnK88I/ay4/l2bWPf0jZFb+Kjhk/iSkRK0kDBQ==","shasum":"2940dbfbffd8d8cdadc36232dc6e20bc43138353","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210172057.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy2Na7mjK16bwuHRLahr7KUFfdAmO1UVdRoCcFBq9anAIhALCGYaY4A26H2DYrO2lpgATZiXP1cPBIbCmmj89GR7b2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmO7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6aQ/+PigYmmfwADuMR8XCkMxHjWCgMMdXJL+89rG0UtnnLPsMwot0\r\nRdteQXR4R3+4xvaIuN3kaeI+yYtBFkuGhIHPah6fr591/wssCqzgzqhuVBNO\r\nN62mi1MZZhO5GqitwUabKCMYdbG4+TxlAlkDKAN/fTXbr/6Roc+K290mIQsW\r\nuK4E8rwT8xngPI8RqHuUtHm8uNDS6HNdGB7LhuDACfjiC36XovHSq2k77bvh\r\n7dgllpYZTMIJhYrxwnVlQdXiByGPOSVAtI38SHIoLMpp36g+TtJv1dRyxn85\r\ntoYJGstejZvTyWQXrUnU7vovhruwpTtm8YwYHJ3v94uoCURQ377GAbwRlM8/\r\nUxiSrH4z4em29fBVFaCehsGYHNLei7sxY2NqpzGoUui7gyVqA5SXoJN1mK6U\r\nlm6EvMTslqxKrM6kPu1/HpwYd84YzOg7gQYCBfNGpTPphg8a1/oUIGJ3UL/a\r\nxCfflKF3mmWhq34kFG/SEbNwIldUp3SCOC7Oh8EnYNEYkeRuu9XdovmJ8Q+8\r\nzsdLJwYB4r5FKNyKdFvIbnZ67NdN2ePnlFPbYOHRTYQtVqRUjifejT+3txVJ\r\noB9HOv8AiBve8OBpcuQd1t4OhatNnISG/Be7zlikebXoHdbvTJtVMX/cZ/Vk\r\nDrVVLTmK6iI70kqfaZibk2xaZdzoFIiJCEc=\r\n=kNYX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210172057.0_1666081722835_0.3422355419694034"},"_hasShrinkwrap":false},"1.2210191347.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210191347.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210191347.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"b2888af97582abcfae901ed340328b22e9caf2fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210191347.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-CmvUEjDODv5lLuG6V5X17J6rbY9mSg7NdS0Q7QMjr1BDcVir63UK7kaDLwA5XB4GCud9fkjrQXfUfcmJmR8I6g==","shasum":"0dcc7e0aa0bf53967615271f5c6139dbcf0f21fe","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210191347.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDco3c8G7h5olJxC/4bYzPTzt0on2jA26aMU+5iF4g/fQIhAIfl1JDNWanO7o9xrZI7IccsLdKW40JeFZAjQFFjAyLz"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQZHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojyhAApRcglDA24TxHMe+Kw+vWulRMoU4P01r7CoeKi0Pha6ubhucg\r\nqvnlQuR/ZCunuq/Aw+G5C/cgEz7oZMW+IMuYAc0YiaVIUF/E4tu1gyZbqPC3\r\nL+w76B5oxRQFW2KRBsqzAXH/fjzlCpnDwssyCCf2Xd2waTCXTJ6pFQL7T7oB\r\n62vomor4lOTKu5Jt9ETYWuhm4wH305ZjM9q6c2RgMCBz56J9MCVZ7vYKHQi0\r\nMzjFkuMusQLY3p6COtfYBB1YpnVI7avYc2ttuAm3HoXIAyDY2noQ1+5SbyIh\r\nL77q/HmzzgVyv7S5TpcgLCqO14EEVJcwoUUtQAOkaYCpia4Kf2OfYPIShmwM\r\nyb6kU1DAkGqkhlUA/+EhP1Q836vcKgNvNKdRPaCwb8ED11kCdugEe23mkdCq\r\n+CpFudxYAPS00LlHFDM02H8irdx7T0YiWQTs5zXM+FeRvADotZwLX6683ruI\r\nA6Rtyh3opRCkDhrDpFn3iDONvVUeDnEfe+F22UHIjHLQapJklrd89vMLAs5e\r\n7YV+5lWJu05eJWSWaSw/5elRoxd/qynQMAXbK+oYAJObIsMcEgpu2CQkyQW5\r\nDEshTUd9xCg9m0ByClz3Jbqw7uBELPXojS498JAIhvmsPC6dPo2oxTapU4NL\r\nuC36Sy0sy0QRmt666ORK98Tnsaqb2XA1TrA=\r\n=7ZFQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210191347.0_1666254406927_0.03982607066990651"},"_hasShrinkwrap":false},"1.2210211855.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210211855.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210211855.0"},"gitHead":"07d99f82baf83d9f0162a6c7b8790cef43e820fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210211855.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-17DTi6DoNaUtJT6Yum7N/SXmYJlZoYhl81ufkjKuPejO+f+efmWccEiOznYDSya56DFyX/724wz5mCb8iNeYcg==","shasum":"0a7c45ccf67b70445f3ecdb06d0709e969150b99","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210211855.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0zuT0dnR1fLrcqluJ15w4L8zUM9IdWwVDINhzgjxgEQIhALN7x61JSbiZzWfoHGUgKtZ5LFtZFpPoZFVDZPr/Fpq2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjU6jfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry8w//T4W9rnRZNPSPAuxEquVtRMSIoPgYZrviJue2FhPN2VRQMXjz\r\n1LS6a6DKLCXwCHCyir4eLePuR+dwfXcpcLzGc9Ej39gmK9Zk4mJeF47+j26y\r\nXO92SiMX4lJMrva3LQBvBrNFa3lhtbJxB43zcRMVxt15WJklPNb/8lgHB+u1\r\nxyc1k66PmZ7rvJRCW8cYHUh5p5e5PkOFlCH4KpxpPsFw7YJdACOr759ggt5t\r\ndHSwQMeKTuWtDltw3B42qKtKp8ZtEcMAeC1mvvM5HSqe9evieo7XW7/FQlZz\r\nFy0OIS1PmqMsZjJgkKxcnMFStiU7AuF3tY4AcWnWvFk0iynFAiJPEL5BtXZc\r\na0Cv0k93rHQKWmpk8Rh08BB7hByNv9DjY8F5mMRo9E7ZGVRFG5clmOfhrPgB\r\nNNn8tdbM1fvhgCoF+IHuLm4RpNSwdpK8Q1R5YY6Ez5NUhlr0jnwNEcqU4obR\r\nDHDgGMEYy9uVh9WfqmJa5oUfsqN53RxkjTvPmDntF+MFMfMtOsQyunAAwCvM\r\npqjSC13gkxgszgiSKCj3hiDIPgbWQYg3amFlPhZZeoGbeRTIwcjQECRmfZBH\r\nzLQn1SQEQBEh1W9xUDF4t7wHstZB7D9cKs6YkErXuof6N3hU9xfzzDVT2Rvu\r\nsS8eqwh9/aZNkLSElPglS/XiiZm4IlneFDU=\r\n=5poj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210211855.0_1666427103156_0.2176688848005297"},"_hasShrinkwrap":false},"1.2210251605.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210251605.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210251605.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"a1f66509b5a6104dc33409f285dac1ab133942f6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210251605.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-QVO99afWDR8rvPbCuAvTcZyy4u5cwoDN+yEFel1hUlTaB9nUtiiBJx+Op633iBk3ofLcUyzLPOA18M3XFXrqzA==","shasum":"0f2a90b7a969902e014b8d3b19f61627d4fb5711","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210251605.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHY2uYmY3TnCjtT4XFxBwqLweapcYrVqdIKJq3tiR/InAiEA7rZeHX0xtcMawtr9s86U+iVp8A3qIHXc6iRd6Aj6Vc8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWO/1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgJw/8DjJht7NtvfLWdX4uohJx1jYMSlYBJy2YKZhs4Vkx46Eih80B\r\nffijzt36nNp5IYhHHXjzLaF6N1u75VUrbZklg06m6mUZLtqSZt/ItG+0O/S8\r\nLiD1f9KRB5yrfbAtTAAc8dsxEZSzviH7bX+cC/scX6WCKVznh3LW3VRYQTKm\r\nQJli0juOR0qO9czR2JOUsWkIMtAL+UFJzP8UtXZWntuo2PsgOxIeeU5sXp5c\r\nYsKrW5m3c3P3rcXcZ9ZUSkrZEtMrpGr3iHb0jwwYCR6TjcnVN15S0qQyGhY2\r\n7j6YWPE9oN7jZeSCt99qdZRAZFtsLQuXPjRVe2K4SWMmu3P/HTYnucj9c/oO\r\ndTPaISy0nuWzNp3qeBoKxeqZtx6VhpLP7BapJrZW6K0qwYhc5p3ckoy9hpF/\r\n90n6lGRxAH65d2I5VqxI0LIvZF1KRimNGP6YXxy1iIWTJFAyiCZBkGzHt+/Y\r\nVvdqnks4jnvhlIvqwWWu2XVDSH7Nhr/IIffkVHuUMXnwOek0NgT1CRZzJZz2\r\nHPVSV/wQsju8IFuBqzurdn6BMy3K3N/v+rfBAGoLE9ZHdfA536nyhMOWDGAB\r\nFP2pXZ11iLYKxlIs7nhbA6hGYy5VphhfDEYjOJm8exdzfDDNw5w4O3b2WIha\r\nPiiBpn8V1LR9j/W8oELREwVvhR7ISCKMb/c=\r\n=zjQa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210251605.0_1666772981377_0.9545077655816729"},"_hasShrinkwrap":false},"1.2210272257.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2210272257.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210272257.0"},"gitHead":"9664ef260a4ec8fcc997a65025bb11a20fea937c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2210272257.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-DvOcsvRsT2idNHyqWgWZeEwG/tmU/kQyqNUSSbv5eibzpix6VLYny29HEWT/NGpcoM1zffq7B7GJ4qRtUb4Rhw==","shasum":"664615257d49f3b440b69411ce9126bcbc125306","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2210272257.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIF965r44Wxal/LzkSSJLEzVQhgt9G3A/jwbpoukt/vGUAh80jRGeoCeu1QwR2aAMnDOhfKeuLEL7RbDOgNAifa/n"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW5KdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4cg//QWPyEc9EnsQEWX4u0EOc5me001VcBqILRC3apNkTcDfc3rpM\r\nJ8PMkgSfOGIbZNiXCMCrYAbgEN9cG7z0K8F+hqNSLWk8b61zgDHP9ZPZg4j0\r\nEj6Bd4O9vcLFGYqi7VXyMx5gt9vfDkChf63zlHmdaIKwvFM+wqtxRNly1idU\r\n2zHYiDMU6xT51iABDOJYOgA0DrfMmEN1Ldm458xWvCh95YdONXyX44La0wZN\r\nzgmEi4W+tDdZOy19ZX5D1SRPeqh8/oRiAdnytpReoHHz7bsr1UGdW0ugjViV\r\nJisznrKqaZ8uTw5OCn7lykPmH2f7smkubfVN4DlagiIWrdtYeLCz6JhMUC1/\r\nG166c1NBjXoFpdPSznsLfZ2JYe2q2Ox60UXgJmqIbtLzhtNXlfnqf54JEuUU\r\nlSYuWS5D8gg3eCeQJIFbwJFWY0wbbm/uzF37QbqC8mRBI2bueO1T+2DxZRvH\r\nhqnmquxiNuUk1DQRu0Wt0H7Gt12S8i9F08k6WnaGrogwS6FyJy3Juz+sym/J\r\nQ9FnHNa81fX/iflmAoQ+8BP9VA+pcvYVZggkElSd+g15Hjcay6bpmgJ39AVJ\r\nDuQ36WRXFiV6+NY8h+o6iyVTT1ru6fbHIP6BElJrQpcjzegRRqzQHa+p2vPv\r\nZg+q46phS3COfx4gRGd/42G/jIMQI0YOsQw=\r\n=yUZp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2210272257.0_1666945693341_0.976740938189236"},"_hasShrinkwrap":false},"1.2211042305.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2211042305.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211042305.0"},"gitHead":"592500a0e400703252086eb8ab7b1cd46d674ff2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2211042305.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-MYQZTi/06+V8ht8oBbkTP5zQKbEGpOMtgtbslKP4oCvQiF1O5r+Da0YbL0UIOQuzNfYorCwCgcdo/Y3/rU/fpA==","shasum":"26f9396264715d253f25b1d3d6027b4b991b98c9","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2211042305.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd0gFEF2sudpD0IWwI9JQGOM2lJXI0BWZeyKJuP/qwbQIgfgm7HZPYGfVFiTgEBbTF2Eqxg3qDMY8/bxd5/RC9+iQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZh4gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd+A//SzvVT3Ibftww520XRLwDzEayjx0eII2p1XSgmwWOtFXkiLgV\r\nfLtlMvrQPaQ/w+jRDIfDyW0hBN1XPJ/SDPyqDcwyPtewICFUuNfEl7E05C/5\r\n//3Dw7fhcmnVadHiLQrk0iiQRNY2GMJWnX3IJy3HHwE4IErGbKvFqN4Kgo0Q\r\nItnZ2ZJIgoPLavR/ahKsToat3nvLfmhP13KHebYAsQGRWFUCIVDbl0Iili6b\r\nbep5P5foGSFdyALgBs5cLNd5sXXvXgFt2V1snOmAKY1qqHKE4ihM6rYg1x3E\r\npi6Qe5Q42PhMni7rJIATcexcvc2yJxorAcwn4u25BWgdl353gAGJNxNYEFYu\r\nlCP6U7/IeRu4pOW8tZpMpT9L3jmILz9etrI6Pk+5kPW8XMH9eenIo37kQz5a\r\nAEgwxZ4tyd1xdSB2rhYlxzh3VNO+6mmXuomBj6YkjD+3rmb07xswZe2ju+ib\r\nAOI6vTTbwh0NfmH6C7yqHjdVIm0xvX2QrXBMCCJOXnCz2oyEp34VwLlCpNdN\r\nBnCPbYothRJIMVWnmTgJBt91lJXsRVcBZd38gr0G8YH+QGtK9wweKZ/w/NnV\r\nIKM/4K4p/Rjlp8ZMoHJgaMXcefaNUUmK6SDiSN42xirbLJxucUEMa7rKZ/Ck\r\nL8tDbajPaWsl7Zz3YfIf5shmbfnj6zepP4I=\r\n=X/Wz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2211042305.0_1667636768219_0.4519177858873502"},"_hasShrinkwrap":false},"1.2211060024.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2211060024.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211060024.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"f6dce0a3fbdbc90de3eb1773dbfc31ff1e476460","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2211060024.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ToFnulOC6aRUVuI7yceJyhLAWoDvfhEBwP4qwqdztVQzkiVAqTIBpEpdOUFwMYeF8XNa+q5+XyahKgjrUoiYRw==","shasum":"4525e7600a9b41b042100790cae6b67f64e9a378","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2211060024.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5hqIfvl6z/DOqsPDnNFbwCqaiz/UEM7a1VUA9mdgdyAiAR6auhvTpyIF1dbBWOxIKtIhJx0f86YTroCzE926SCaw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahLOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvaw//cAOyWY++jmKs4xuZhJB7jlVHR6HH3sfnr6cIqry0d8O33ebX\r\nAnQXiy1NYja5PKdgAf/lV7Cb7ecIPXUuG8lMoDs9e6zGHQDQ7BUMXZLt+xOO\r\nOMvs1GFT3XcDiMGu7moVhKNL5G0DcRWbzR2C7nb772zlJK2wbjC4oYNZyPnb\r\npl0AmFjWxjDMazX2JPhHKchq0PbGzpkg/Q0/SS9vH3xBJngoPRmcKv28t3Gl\r\n1GJKG8lgUba+qw51iL0lkgkoATfROBej7z0uclOitNP70GhHvSV6vkJDDsja\r\neo9Syy2jv2+EiY8pbMS7xTvrs5MwN7JantTE20ZZLS/DrU8LE8HYPyHSLSDn\r\nJYl+Wyn4RVbX0LQ+/CDU39rTttsanVIJ3uRBJZYaq2cnUCWOx8u+Cwrwq5K1\r\nxOG8uRUADK0HS71T1V220TpckHpLfqQfaqMyx+O7RWSDuLLexaoHKvfGrTO8\r\ntV70tnSdWnaAr5n0MPQF914nt3Ie8FcGzqUFA6kQAC7AVoJqt29kK086cN9O\r\njFjv/i11nxg8cLEDvsDy2vV4gws5kGLqEliOsIcbu2fgSgq5DDVxp+bN1L7M\r\nFsmDISWmzPN7Id4XM4uTbROBw+uZrVgjGfGVBsk471XDnwqH7MW4uRtK2gOU\r\nj1BsHwheOBdp3AXtx7Cum23XAnPP6orjHZg=\r\n=YYWV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2211060024.0_1667896013969_0.774197168154664"},"_hasShrinkwrap":false},"1.2211111611.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2211111611.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211111611.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"f9c1138144838b5c4612a779bf407d2b2413d105","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2211111611.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Y8tsNpvQarpYVpiW6fgX265gvdZxbH+MN5jMv++eIYvd/o8ZKHVpcWZoqEJq7vcoZ5rGm+BPpzQX4H8xBYpABg==","shasum":"e798dcc1638c4cf4c158c821a52512bf39a46d24","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2211111611.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQGZABOuNdF1wZVTdmZcx1vi8aID0B/9AS+kh1V1O/9AiEAtu1QQKK30FnwOvxM8okWzdIHT2KjRi7+5/BeZNLG/kE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjb1iBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmVQ//S8UrVSqVRgzdLHMvadRz3B77P/15ZWxkONf6AaVMqICdXRRJ\r\nVJH1SZgiVwi4EIyHoOj4SkHWGaD6veKjJhLFIp156Ccf6VXMRE89Ra9xT83X\r\notQiQnr6tW4W4wBGaSqBlDknzbrNnWfcfR/RkmE1h68DsEN2/ow/7znme/g7\r\nUw7H2NcVfJfww9njBpIBF287nKrlnE+WK88J6xrnK8P/S9562kilZbExKswg\r\nLiwJ7MDdhE6HqfgwPsyDaqmCAASopFNzWO99O9OPfvDKqRQmr9Xd4vdI13Vx\r\n18tVCUw/YxIOiIV/20m4ZYHaBLKkmU5L7Ds8P9173xqOwNh7MIQGA7CZml/C\r\nu4eIGt5GIC0uog4xs7uAIZgbiSm/KEn2vH/6P+jXLMS4umL/R2DH1DLJKCAX\r\nnmuT0G8KjmWB5CJ7p+ysboOj9Nzcsc2YWrFzDMRSyvQSVoBSpo2pfko4xWp9\r\npbuKLRsNRctcJWU9QcIpX9j5OZG7PC2v4ZQo0fVJCHAt1SBJynoIuZ0S9s0H\r\n+ONrClT88N9EpDO8ow7ha35TQI8R907OIbwtBNpBaiV7FNV4Dp+tPpbNIddD\r\nkVv3lLbaiLxIxwpVMbGnmfvYljzP90bYu7S5kJk9xW1+7jdCYlsNPpryCPxY\r\nSGMX/Gk0+HI76SFCnPh1DZGdVdoi9wmR+8E=\r\n=ev7N\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2211111611.0_1668241537486_0.7916383922138437"},"_hasShrinkwrap":false},"1.2211151402.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2211151402.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211151402.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"db41c24bd071b6322e0a5188c4bd74aa94cb9d5f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2211151402.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Jq0sZLLWRi83+dtR4ZUHtgeSbYN7MKikbUN6wbHRyJ7EhiQ5zlcG2Os8mvbqJp+FQI/Pk2DdUxTeaTH26cs+3g==","shasum":"a830cdbd1ea0a156e9412af759abbb96da3e48ba","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2211151402.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoxXFnghl+r4v0QHBvr/o9nhMyXjBMstV2XdYPIqxi1QIgbjsLQy9gZECqESFBPxuEGkJ8aZpLVLxBhXAV3kWPPxc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS/DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovnA//QCLjmVtL8HES5lNjBz08eXxPwu8z/pEpcgXSDFL1Rw+AzTuO\r\nOpn+kuID5p7N5E00un0BUoRdasmHi5kiaCCYs2GAPn8DrO/9Jg5UJPh9F5DT\r\nF0dS7pMd03sFbNUryp3jbXcQJnYC0Cg0dTcXUw1FHZMBqzlid1juUmspJOdB\r\n7BpSr3HIXyLo4u2OiuLtwnBgyn0nI6lD485ZI9mBE0rp87RbbyA/rcxgMtTf\r\nhs/tXwl4zf1Wn/x8yfrvlG+QP7Hk/VADBTn09uw6SEcOic+gky7SSuMTRtsV\r\nRcoKVmg897Z31k9axqDEeNkE4snSQadbTbKZTcUPs7wmzKENah7qhAjL66Q8\r\nrkDHcr8FizobVvwuO3ucCVexQeR9QN9tj9gUwNJsJvfLtH+IyEoTvGbs8FW6\r\nyQiH4MKR6Eizw693fR8goLJ0Eu3nkbGuimuXphmz2+3JDcXolyiHBK2L+Qo1\r\nL6OF+0yO+18WVSvtccKvDJCVyeEKvKsdHTcNbP6EwX98Q471Cu0RHHiFLDa4\r\nHwXaUkaGjDpE7HAIQO6542RZvVPmbz8Yct48PtYUeFJjNWkyPRGbMmYU1l5W\r\ns7aW3dxZOKLhfw+hpnh7avWMrNZk011BC2DuvuAwGkdLDhLR54j9bsv+VYS5\r\nzmFvUlamwnu4qZnIv7YrQKRdi+/p4MUqXzI=\r\n=IHBG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2211151402.0_1668624322768_0.7872967228357477"},"_hasShrinkwrap":false},"1.2211182146.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2211182146.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211182146.0"},"gitHead":"d5bdbc6c36475eb2c4c14f2b02a112669f244641","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2211182146.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Y8WsYO/B39TqRtc8knu7EQlA2I0wi1Gyn00iWiFNMULET0gM5DCqsgMOaKBXASCpLaNZV8IbRkZsrDaYyIPZNw==","shasum":"d0b4fa7fedbb5bcf2affbca153f74d82d9107bad","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2211182146.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHA/NVd/kHmIYaU+GKchEsIQ2jalZdT1+qeUMtKOxAqWAiB9bn7HvdBkT/DUJGBt1cRCjCMjjn8V4M3pPG8KYeZmJA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJNYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqrtg/+NUhB/q3Gx1xAFQO+Uoj6P0vLPGPlkHORIpeJjTdthT2vqxJ2\r\nRgTgmBoY1vuDW4+TjjLz13KE9UK11jNWfs4F35z+wVJS5LEEPY7q44DZynrX\r\nLX0hhKBcSrwlstTILQ5X4Lez3gASzFXiXuTViKMKThgGmTFmzGqLi2NGeQg0\r\nTQ9yv5YXaD8ZfaSufXQVpencuZYF+c5GWC2xa0K1257y9Q6Dwk7ANcEGDK/Y\r\n2WCZgydsKVn7XLdXrD3osliCER22lkwddHcOuAou6K7bXgKRsRPws/uaeM6+\r\nWXMVi1h9j5qnueVoV4Ooma9l4dQ5QY+HIXSproXhU+hh5VDFakLwOJumpZfL\r\nk696jTs/zA4z4Uk9W1hsiRA6ETBIfJCkmezjZkM7/RbqZCvuoYA2ejjPfbuv\r\niyVklLH7pR+Eao+rqU/e2XO6rinkOouVgMSyBNiJFGomrp35YUF/j+wxk6a4\r\nAjUosYA3rXxW+aV5ZHd8O4hUqwWNCaymGuDZqzPEi3rfW4Y1rrfenw294hiH\r\nhlktmo3uc/0hpuQbTg6koN1S3RLlD7b2T/U9sC+AIdwHOnPwvKXV+m+q1owV\r\npX+xBdmROkeOzhuKfOwblz9WqrzOWf6D0wn7jjiy2vb/GU2ysZsN156UUD3B\r\nRhYblfRFYxFZrcZz3dkX4e/+BXoWBN7Rv/E=\r\n=X+fi\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2211182146.0_1668846423862_0.07988238775033074"},"_hasShrinkwrap":false},"1.2211250451.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2211250451.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211250451.0"},"gitHead":"3f47d465c6e6f4ea83045b32b2c9f56eccb943e5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2211250451.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-yH9NGjJBy06zR82wALO82yc0PQA3/MxWs4F0n6s/LQ+UvVIytnfsbQlBW/eJTTmywOAiWywPFqBDp4FVwhd9jw==","shasum":"b3205b5677773ff2e8b42fed70fdbddf1c4351e7","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2211250451.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1BRSfYUKc0cppulrbE6nzYBkXUo59w3nAcW6vMPwUxAIgPeveqLxIuOrNhkL+uq8/KH1EYIN4fNVmTmkDXOyBvs0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjgHw0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovTQ//Yn+ZoYh0NfnL5msNoukKSnwqJP/1RTWd2fB5YemxKsmBdk54\r\nY+NNf9eG0HX1qlrsMpiRPViFQSOgWNoyE0tONEZmQi9ARzfT+68/oyaF0Py1\r\nJvfmposQF5/S0JGUTrYieV+MSwaW5HdXeyp+EEltFByGmKo7TngEsDlW3/b+\r\nn+ppVueJz9xdGHJ+9V/IGNW39ljtBlPJSnVkwRi5DM9ZAuz7RRWxH7IzPPn2\r\nFg5Ygut9paApiMOwPwP+OgnRg/ccv0mLk+3pYr0far6syqOBNlzZAbzcF0Wf\r\nvK/FHz5ovAkUIkGdF1itTXJKU/CwVJ1q40HahQhPUYSbzGorzCAF2w7RDNB1\r\nhAjpuYrZh1ReKjVO9Lp87KxwMWPK6Tuyp/+JGqNGMe6A2REo/czT0d/pEerg\r\n6pbuIUyDbZvH9KMwguaWwWssQlK0HepKpUh9vRq+JtgGY8NSPNFAxvOb61Os\r\nAF2XumaVE2Al0hOcAE6M8BGuaXRPt3tyBn7lBz+eeKt5VBa3QvMitnkLxmhQ\r\nlgurctzY1v2tMbNKo3UwpJQbiBhwiRauRmL59zAohw9BZAw19YgZl+Q1XwWz\r\nWCNZe0oNfckVdy8sPKjv6oKTdolvxoOCvXOL7BMFf0IcsWDNA9/Ve5qZ6Cy9\r\nVEnVdGZUh5LkpukX/dQt+r5kMQG6cBgCkgA=\r\n=DZvN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2211250451.0_1669364788488_0.7778284398061903"},"_hasShrinkwrap":false},"1.2211302304.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2211302304.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"8ec16ecf1bb95c1a6368ab455a6cfc7b1caddc46","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2211302304.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-o5q5Pe9wwE6F9+f6z8/pHb8kiPyIkftOc61SWFTeyQUIn6j2oNcMdlhIP5BNypl5GIC2cllxn7hLZU2Y7Jnygg==","shasum":"fd11a7aacad2dd83f6e157774fa73911e0cb23f9","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2211302304.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+deDkD7tUMftwXW7Tl4zPQ1Gb1kQsjswnxPB/QJ9h8AIhAM5LxmJ/9Wimz1FAmA4chYdYAaH5ab/3MPQHt8P/+Jj0"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiGUjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojhA//fqc/Vs81M4Ht2KzWVsaOzXMgAfyO+W3uEsNCNBbauRGftWw4\r\nHiTxMyclXRmF0hVgcDVXzSG2A6olI4PaVP2bgZhfaPSKfa54+AwCTtBPRTI5\r\n/lwW8jEAn3ktbnTSK5VnnlSU7EnyWsT1tZuFfOopVMuO/r/foUDenlOG/I9D\r\nOZhR/s+0dwhpI4DUoBcRzlEN72byGl8RHwPZ2p0Nx76bN1qVDlks/BlrsuW+\r\nTOtYgoc3oE6FnnWxV38tzDtYUfh/07eRJq3irYydN8c/1F/tZxmEpuyMPA3o\r\nS9RS90lFhSXiaI5pQ5tI8EABVHGVAaLLs7ETdjT92zdrwFs2vUXhdKYKYuNg\r\ni14hknHpm1ZtM2RqdimzPUjPMqaAAVZ2cXPCv3UNAmJvwRxsiR7v2e8DaQQf\r\nTaDTIspDmeqLBB6hDZTxJzZbtkscrrDgrv/nk/tAEVUtzyzyCKm3OCDPDlT6\r\nDS9/Zejd3c36SBCjFqU4maBYdKosTtFPr4ceBPnwXMz3/z+V0VXz9BxpC2sX\r\nbJ81MB//u5IcU/FY1UweFjE3gUDyR2uj4e0LjKGjcZq9X32Xl8AsAZCzlfQO\r\nZjNhcP6JGBgKB6YMgfwt5743Z2g2jLNV0ZKT7CAIzfoq6e6DOsE3Qp4WHe27\r\nDjLflnsLu0IbxlWML7RLScPmi17qZwhmMsM=\r\n=d/L0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2211302304.0_1669883171558_0.04406718764007578"},"_hasShrinkwrap":false},"1.2212071834.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2212071834.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212071834.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"9e7a659da459058028a29b649ceae3a2dda7771b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2212071834.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-mP7ejV9K6oQwVCPdr4JsW7g2yvL5PQmOTLWercrdDMNbQsdsRuvIayickOQ2KEn03guV/kmeJDApZRKe/t2DUg==","shasum":"fd126b379b7bff143f5db3c3b540d743b90f3efc","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2212071834.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCil2Vy0NLTAuPKkGB0AnRJuiRx+snGlYtpHICJQGf4QIhAMf3qStp76haFLvmaEvytY9WmsaEUKDoX8MtKS2hLVJL"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkOv0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPohAAiVG8syFe1t+pcoM/c5QAoSeVmqISAahie0nzFSKwlscysCK5\r\nmVAfDTw6vb8OUbO5Qtq51uEBiKG7iCx8EVgB28rse280jMuncZonZCNj3qDg\r\n8DyfSuh9V7vwB6fWmaVOvDMtxHUPhV1/lVN3MB7adN6aEzBTYaG+eoLH/u23\r\nUq5HZgnNU8Ej3bSPMDftWju+MbMMO3efDodq7W64NeLczTaL7w7ToJPYm8kU\r\noSFt7JQFuEmU0+8oMC0bY8JMa6Cm69lCMZ+fChLrAWUXeFycMo4kJ61bA9Ov\r\nZeT4OsNPVNfA4nwFSYZdtRLz01c0rFGNvXzLDc/n3Q6ZcHQnDy9b0vPRidU2\r\nJFQIvvn3tTSaXZOEwApp+lQppn2GKVvJM5jUPLL4bQuERPCV5gIOKj7mwRVh\r\nIrCL5nLvUWW2cmSwL0N9b40OvRYbpgC9yWpcGp0du69pJ5ZMR7lRsMm3C35K\r\nUxbsYvtfBT+/coiwBY8Xsn3SY++7lZ4WHaydAlME2ynC0Cnb0VQPBX/fVOtt\r\nY2QV2y0V8fkHU31+Lb0FxUQf3OBlQNk9b+F+WfS5c6O6EnbVKjmCkifQnsm9\r\nIqNrten39xEtzrjTEUTHVedjj3OwKcFx71XPq5UIAFxrG//Rr+EJNkS9iytk\r\ntbbn8kQHuPCzfMtd/nwVQDzDxwtCd445TtY=\r\n=mzlm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2212071834.0_1670441972709_0.5933894080381985"},"_hasShrinkwrap":false},"1.2212092023.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2212092023.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212092023.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2212092023.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-2doF7QsAGfDHoewCiDXb5yzf+I5PzDGzgeiw0Es8PzC6AeZf6XMNBs9gqKhRMmN0cW4vr620frwC23JM2qM89Q==","shasum":"a0127751a1ab5d89a664f5e3a194ab8371a38108","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2212092023.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/APTYIPWR5brX3JoYgWng0S0xLfqLo7DW7aQJ3z6K1AIgczTypQVghFEvZYoxg6DqRKvOoJsk+4uO2TtnJQfcIPo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlELMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXPA/+M3mCd8IaRVEktwPhF34QlERQk57qElPHVSFAjKb4w2gXQtvY\r\nkvkNEFHEB5kRXH44/fYbC6tAXMzUw4AE7yJupfi0vYg1o2ZLaxjcgqQP0ukJ\r\n1LjBfz0BOiLe6JxdQUMeQNQX2dNspYecdCuGo9oV6o7t6wxDv8bfy6MKfgVg\r\n11HZ87x5LJvYhVqzID8JGXt8NFtRhsSDH34yYAGfZEHoxFzw9DBiqH6CCPOL\r\nP+BiZ5/PU/4f0FWu3GKNGqB6HIgczCuDxV7nbmxzaOJJV09ipi24lWLBSsyh\r\nYaQVDdh8ij83WFabcs6c7515iQbirBNLt/RP+r5I81Y2GxV7403CVaWJLikn\r\nVc7U4l0CdTJu8nQU9/hKaG13REmmTBt9Nw16JktfLkXl1LOYmIoZVTQe7A54\r\nz6h3Y1X/RcQLQaYQVTDk67stO5FvqTvQQt2vdfiXvYOTfpRk9xKKeQljXtrf\r\nVRAx5RYKDBgSnR68ZV8Fa1QVcwFd5/rc1pcVulbNBkkkbNggX7cKF+AGeGqm\r\naoFpf1u46j632qTMl6dexx6KyAKXibFpqlWTbU8nAjZdGQBLcMTOZKRuw+mI\r\nMayYyFvH80YUaIm8Ul10IelDIIaMWO4hC4XvdfZnirk4XsK0Jqh4wtRODUEq\r\nRbFzTkTde5niEo2zhG/Z6DqFuF6radrkJso=\r\n=+doj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2212092023.0_1670660811810_0.35580755675201403"},"_hasShrinkwrap":false},"1.2211302304.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2211302304.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.1"},"gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2211302304.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-wZlhW5woYX+UPuTihrPy7QoS9nCLPe9HAsDACXb5QTvxX/nGK/JGjLoh14jEWdeaHAYvoKFYI28wfjmDAtTfKA==","shasum":"43d6d018fe7981e198765295a5ef8ef7fbac1355","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2211302304.1.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWS5lzXSA17HVY9qWcIxvktHBoVmJuIYQ1mJ+624meSAiEApfoGR2tgUFT2r/JVGjf5V32Mg/O9YTgNqxRCW2uQQIE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfYhAAgmvp3mMR+xflmZEiYj0wW7yZvWoUsMBg5BpyV8qVufeRY0Mx\r\nmwZpP7TP5prRlMiDLJU/3srq6WH5zCth1jzIQ5fAeKUmhV+FOucOK9hLMio+\r\nRamewC4zNVwjM1kGMpoWionKwdi6PlnTR0IjQZbjYHmEOyU6H7uw9D2HmGP5\r\n5QOeKe/1de/EGT7oJT3wRQpshoRkZoNcvlDs4LWhHqLzKpK60Y7yNPPYhDnk\r\nxio1uqbI7LyK8DwgZgMafu3fttkxxQ5TRNzCxCeWBZ5E7dXLFoGS5p9tUsOH\r\nIJO9XXU9dbkGErhjCC6jct2gKIcgCDpaaqGSxpPOFVUJ0NK3LtNekwP7zhaV\r\nraa/swKfQpFPNxRZImc7Ytxv4NxgIbTy4yQVjbl1aYpcXlNBlMYPhvctjp1f\r\ncCTsRJWMDib0/LsTLEgWekc0xwTb+vJ1VYrJGFOcGNAHCHG7tk8rHjT7Ltu1\r\nh7X97M/RgFfeyyJjOcP+bF+RfxBk8ZfpVO5XNT7S+1F4JTNoSi/9P5vmR/hu\r\nSoLdkp3lm7BxPxuoOYIPXENHtPKOihMKeNXNcN0/kZnu7C97OlAEniN+Q97k\r\nVUTPsLTKLhF7iwM18m+y/zCfb8GcUHk6LxM7VW2VhgXYUocYPaZRUmJ5WFVL\r\nER0QIcxwfBPXfRsSkFhGYd4c7zmSSvNdaSA=\r\n=WKQ0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2211302304.1_1670968467747_0.5609916210588459"},"_hasShrinkwrap":false},"1.2212151632.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2212151632.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"6754eb8b2feb7d6eadedb57776b91613ad5d6dcf","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2212151632.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-c8ZUIBUf2lt/DgRUkDmyvTCYbcp2Au3vT21kubGdj8njyeVxnymB4I8o3BwCr/54I6egrfvXOlkNIIFAdiUISw==","shasum":"d3899dd32fc0104cd7ecf0ccf18b9b0d6fae9b98","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2212151632.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESKCNrl2BJRJHNf9htXjOFTy18p3AbEYp9VhMaCA0W6AiEAlYsWmWcsVnTdOCsCjpDEzu8+0u38d3h8ngV/EooL16Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjodqMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/8g/5ASbvOxpCcMIlFHrPQEchDD/bdt6AxF+Awl3EWt1ofyN+uV13\r\njrsn6AKkjcoa17RPq1H9nIoWVDfBjOdX70w4NXh1gJoKiO+VReP8pi4SPImL\r\ngE3DIqMhH6Xr98rHTURgtFPvUd1qY/9qLP16CeR4jRX2NnfNrmQWwFd6iVG2\r\nelimAmy0kjQ77OaYWI3XBFDgHedOXXYlUtVJVgc8tQacMJJLK99HYqfTdRyH\r\n06/GBe+boA4aPEP7OwFH+DZnEVAF3as4GqRgU38kSKJInVLgK98WxU3KXGA8\r\nFp0+wgbulYUT3X47t9FmNqWJBDAfaf4ag8ro5AJGZyF7Js/D6Kj8tlpnhX2e\r\n3rfWXGIUcejpLd0XaAiN8EXiDnLeppwKWsxElFHHVXTgsAnqOYBGtng6p6Jv\r\nI++zgKnvWwfHraPmoW++xkINP4qjFHlQgTZ+IWFpR6G8cQfdgmRZCLONX/bU\r\nRomOP1J/0gdL4rpSwDIII5WK4tfcDrT7esCaqe1AFzBvSn/qWrofQnjQN67C\r\nYqNwB73KehBY9Y0QTjDSUtY1a/X/xpWbfD3PVodlWwwGwPpF5nfkmHMnoFnE\r\nEiWe/S61h6+HIEpuw9vI93Q89eXPvwL9VKnvPfLLJHnFON0nVCB50Y+/5YbZ\r\nmSvn+pEFMr23zevh1gmX97bJ+MXs67yhnKc=\r\n=F1bK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2212151632.0_1671551627811_0.9777182092633943"},"_hasShrinkwrap":false},"1.2212151632.1":{"name":"@bentoproject/lightbox-gallery","version":"1.2212151632.1","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.1"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"0daa515ff1e284cb2e31dc8fda7f29c073e60b60","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2212151632.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-rSmM+c/fAVtVCWyzdokic1Er46NZFgS0yePVasYfFYUbkejZs//NC/E/dT6KYhWr77XB1W4Myfk0a1GzDGbW8g==","shasum":"5257ed77f08ab3f50c2129af39299a6c6c179d00","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2212151632.1.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtsm6Zs0OkTk2kqezmH247YubamC4hlq/oY/o7gy6piAiEAmw8pR2SbXsG77wzk6MIz6r9B6a544Si2QnopiBIhoPk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjohbyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryDA/9E2s5HidVarORS9iQ0bGrcXTn0RkXAhuLx6s4nULvLd31KJLf\r\n8Nj8/pbIL4neEcXcsLFtoJXpv0AqDXQ5Qm2ilYoWIJyAuSab1fDMYJZIKmaf\r\n6uelNQ6hm6it0BrH8hkq2EQ8dXCiBhjbwInxxArYJVrjEGTRip2EbCq4SrVG\r\n1k0RSPbo7qVJ4qaQNAU4tLYtd6/s2pRzdublswnPvJ+tSQB1nuGLA36iCsPR\r\nnpox8/rE25VF+HzbYPcAFwpbG1HgeQQvmljtM2BiAlW3TbPEw4pebLcq2J+i\r\n7q9o8EXdxSKhUohpF/jAurXk4AT69FWJbWGKpTcQaM4hw08Lls8u/1vMrCKk\r\n0v1sgKN/GjgNrpBi1FbWbI9C7w3HKPDi1n1SsVDG6cASItai0hz8L/kHKvQ5\r\nWN1BFL2ECC8NLN54HlKqC3naJp76HJXtKKM8pNX/52RgYhMhollrnt6t/cJh\r\nY1ykoJEWM4sVcK3OgDUWXeYeFbhnNPTOmj8bcP/ZIVg7DlDMnQpHoGpeb61E\r\nBcWOOWK4llmv6tddawMjfKHs1vAYzmVlDQdPeW2AyHNy7dVfm3BcTDXqdyUf\r\nbGJ/ztpWIy3zYR8irCGriRoH9qr2beJCXm1smh6GquS0nbTIaqk+mBpeKnxQ\r\ncpogOsPyCMMh09yBjbT+zeFCIh3NJAGA210=\r\n=AEfD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2212151632.1_1671567090384_0.08226829637285049"},"_hasShrinkwrap":false},"1.2211302304.2":{"name":"@bentoproject/lightbox-gallery","version":"1.2211302304.2","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.2"},"gitHead":"910a4ee7a16075d9db8fd2c6c5bfb607f22bf54f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2211302304.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-DZ/cG4QooZnoL8f883lp746KFCCz+xt+HmWBWHbVbgjjv5FGLQCuY8rGi/iHk2c7SolkcpKOu0hQlMrUsKYijQ==","shasum":"118ea14c0063e7c55374bdef9144f1ebf1b27105","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2211302304.2.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7DY7SYu4LxaQ3EikEPEW2Rrr0SJqujXIfAuC2Y3WIZAiEAvOOpcCi0aH1bk3AwlBcDhewY+zPdCGc/8RfIwCoKDyY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjojhMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBYw//Yr/4BbaK0dbGBYo9yVBzomUO39fXmA1tWsLl+uT08rBmkk9q\r\nI40AOQvnm/cFy0cJXDkFA70syTNHHiSp6F/fIaOPBqE4IgfpMbONH1mPbC22\r\nB7tadB6CpVI4BTq5fNiPW/5bn8BdhIYEX4WW95uFGRVPvv9tO7D4xr1uV0/f\r\nf2JWIfAXgVARfPCswgyeWs5B5oBx3l/oUXmeub5AEzVV2qQao9AX5lIsDGGR\r\npFpv5/tSCXyJFCNnQ2PvXAaJTZoyaPUvgbvCH0QIK6QVeBQBNGqANGsNhyeV\r\nuWM+umTACGKxWEBbnw657m+4jyorrdcPIIYnD7HrnHOjIcTfbtIdoTwK0dLF\r\nfhXY2zrmVh1VUyJB9VRzQa0zg1by937QIXKDCzLT9NnNd3ujURlvTwfveWGn\r\nf57RP9Jxd674m50fKDB7rwuq6pZn0OQGwNTlTLF4x6xJvJ2hmG3NJzab49Ab\r\nuhq/KAQjHZhQkq1VozeAf9dXDqhIFGOUYm8OAaXfRXOffau3H1/NKRkMjAPZ\r\n838sb7C6aCfo/0EVuWzd3OJZe+hbSJ1nTc2wcPHQu85rv6Y5KeDnD8+bq1/3\r\n0r05DuDKmVSrhhZXj1UIMvDwA7fHyCSHrxviIM0v5R1MTFeVd5RbyB+CuMlu\r\nA3P7Z1J7+FxDFf6unP5mQNmk/phfxuGW2hE=\r\n=eE+B\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2211302304.2_1671575627790_0.9971430382615956"},"_hasShrinkwrap":false},"1.2212151632.2":{"name":"@bentoproject/lightbox-gallery","version":"1.2212151632.2","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.2"},"gitHead":"e3ba25e45c2728fd6b1c91daacfcf7d0870ba6e9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2212151632.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-VdXDYAyIRRdVx+M+EmF9GJWs93StJTh8N4Sn7MIOViY38hF5fCUW3uhycDwbZUw6YQ5Qg9pelV8qOXK0vDozaQ==","shasum":"0bf771276da7424a7c855efe7a92f00f57b7d360","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2212151632.2.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnn9gAcB9YdGNx3THZUCkJ104N3Q6hD0cJjvpYtEAhwAIhAMt8uY3YlO9Zd8da426f5fParjzMjBSUFOTz4GRx6Nyv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtHCRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmri6xAAkM2o+JUzc6YMZ9AUufQjSZ4C8NqwVj/nljiZLN1eorjMo18m\r\n4WH1C/58yXacfHNjQhecaBLLyvwddFgfphRknv1DjbhYFCBnYSp3EWsUMB/5\r\nAvhM7kVF3WxIvCBHMTC1spFbjb2doJZTpDDaJW+lpFhKXbqz8sBSzNfixpmz\r\nA/liDs/g/0bVtedwULAVg4yaj8FPrbOykMuPMyJucJi+V5hM9kCr+e5Y5Coa\r\nDT784MT65T15iobKwsIhMtab8YWMT/Vvxk+znOKt+n122fGVQgc64Co8/Elg\r\ne0fMu7ezZmaBV8uz1ElagT06PPybdQxpIlaXA4EwQAlbXbPPyMYy9Klv2eQX\r\nEj+xoPTvPGBiGAirunQsazYW7fXA57a2o/l/2uAQHLHkDXkMsOSY0WmUnAhq\r\ncoOARvxf31mJ+gQCc2QgXxF4Fc2pI0ifwbM2sAE28QwaCLZfNrIWkMQnkbRC\r\nOEthZ6ovoBEFNkWRmm9P0Ju7tNR5t3FtwRa/i3Im2MAg5ErmmxK5t7lKgFDG\r\nSdRGGqkYF2Jlf/KT//y7IcsBsPNxnRd8bytKe+Ixws1vn9FnRDYcOPXC3fE5\r\nHOsWTrAHQUnMsWb5s9/Mefg+rKO7BiDm7afnQRRYqHJZ3zlsyc4l27e4/lUE\r\nis2q0fp1R8LQqjdIOaCR8vZRS+IYnJfAllE=\r\n=HNdy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2212151632.2_1672769680722_0.7018269501593422"},"_hasShrinkwrap":false},"1.2301031703.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2301031703.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301031703.0"},"gitHead":"e3ba25e45c2728fd6b1c91daacfcf7d0870ba6e9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2301031703.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-PT4pNMbrHOXH3XLQdT39IWJ8sW//LUtTAJhnpwWz/3CXW4gQhIi61HkKL+4Iq5sV46kCqg7Ddxl6f+PW9CEj8A==","shasum":"ef355fa18cdaa5f4e7a312763a1f6cb210e514ff","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2301031703.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/y5t67dVDdeKLKF/KvvZ54HpWvuJa6IHao7KHkQTDtAiEAmaiT2b5hO6Gm+2lpo27WrwIJ2MFINbpDs5yXCOlSmfA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtJC+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+YxAAoflIrj4/+vDR6WEAXLw3w6feorsGehs2Jfb42teSUlEioJj4\r\nIMSM+YQosz5Az5H8PI/sUOMSiPfBIwxPYOXNINNUM7sWBPpXV0FfVrHNXzuF\r\ney3TTxsq4/S65jM4nbqrY01NafydqL5ZsSzqy6n6inEzdX/FLK0Yq8yJPMmk\r\ngYClv2RRTSv9RuxSBZrHS4AeUWURs4daA2dhkjD89fCk89I8OvezyVHkw5nQ\r\nZUTS1mh+3BMXyhzx2u/N86wVbSsg5Fu5S7MMe4NMaNRm+rq+7hydaM6ot9bJ\r\nKOkcOMNTsEEfRz2SvsyW6tNXuf25nZy1MazV4gQrQ7kXUDI5s6gBY1vCuLfj\r\n/IA9aPdNHGkMO2JDsHC2g22+hzZlVrSd2YcOy3KNNXmlJT3Ruq14W0F4Tpgl\r\nN323AH2KXd3q+a77IqA8cNCmSafFVcxA0oufSXeqKQPE03JfTf29l9Ay5QsK\r\nig11/9zxC4nLoNuIZOGjcj0Kny7bSfb6q4hFb9FZV8QPPek2p29dkGeHGrdY\r\nmYlxyRFGv6JWdHl2WEnLD2+c59RJQQ8EYO2Doa98Gr0As3EYfp6tZrlVJIOI\r\nRU6ih/waRMETisAieTKlSXrLCRat1OqdJs/E5ScKcaGjyDZoe28AQ6HjGRDU\r\nUDdo1AUorZ7l8/m2ydRrbVxcOeg+m3PRCkk=\r\n=lqnD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2301031703.0_1672777917860_0.9300894945204716"},"_hasShrinkwrap":false},"1.2301032153.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2301032153.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301032153.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"418b16026c82f72bf8e885668d34a40fe043c9b7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2301032153.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-r1a8cT6DPYH5OcNC6k+S9DkMXiECHzXN+FA9Uh4ZPYqiXaQmDyOO3GRXrUCS02//6iS+76aF6nFWGy18cbqBBQ==","shasum":"b95fe673b2ccac7be41296f9204405499d6abca4","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2301032153.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASQw98noDisrn+AjhzJR3LskA4QgJFZFFfthAFZPFv0AiBJ5im1WxNGPVGRCmJojb/eQ9IbPZQ6AUXobYNHbeUK+A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtThjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSTw/7BJT7+MpWuxdsh2EkzEJQoedcZ6JTkzSSh1wyFfsmAPLNejgW\r\n4BBT9TWyvFaJvgA67YxOZE/51cS4DcPvifSKKphKlWoGFQBWbH6jhFIIVMs3\r\nUPAYsq2tUxN64aHL05eCPTGIQwPFkwJKcmkoACDBB8DfyXYeTaL5eQY1/LI9\r\nuD0jMhicdzgBobdtS5eBEdLUXmELVWgaVLaFW8X7BRqNfb/oiORUYy7ojzVi\r\n3VrVXo+LG76OwXEeG9jr0I23FZGqREW1Z8YGMTMk9dPNO27ucz7G93LZ+W3W\r\nWJlP4ZYfbjFIQ39uSW0JtKr74rc2XA6UFW52L1kVL3pbsndhivUxQGRn9z7W\r\n6RuoRfX54tHjOW4hNrE14TBq72qNzwW89O8l4dRebf2e1tyURTlHxp7nZoid\r\nShtdBtdXjFH91oK18qAV+HM70LzYM6MN2sDyBZdwC+hdm1dQb34htDgHLK7X\r\n/Qej5/k9+n8R7b4kXoc3FouNV83mHYi/f6pnKYj/IVHA71JwmvD7vlc2Bjh5\r\nNb9Axd1KFlfB5Aw6iG1cjxh6OEoggM9CcaLUmuPodbGgUhYHuKqHEwUO4Hfo\r\nVcJr3qwb3Qu3i6sJoiSHE73Ez/2JgvmiK6LwDY64hvnsAkZBaIKK3tYKzn7t\r\nTJB0SvV6wbcnVKHJd4EbfJk0ZiRuT5Bct8k=\r\n=XO0z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2301032153.0_1672820835331_0.2795340690457977"},"_hasShrinkwrap":false},"1.2301041800.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2301041800.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301041800.0"},"gitHead":"7026aa71b81896aaf30f29b822e1a578138e33e2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2301041800.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-YwaJGWdvAJb4ZDG7RFVF0nIJP8xXrQlhM8IM1Kj7wr0SCSVqCRQurAFN4x+ZIq0/UYCPvBOUC1ZP/6V4MQ0zQQ==","shasum":"d68c7d02541e33713884d68c37d8fbfae8d8f374","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2301041800.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3y3y56KTMXvnyojOP3JK4j3W6tcS3DuFQF/aaY+f6OAiEAm/jhKE8orNvNXKMuyKPG3SEAMCfsjSnSKSMVTnRy8z4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtondACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ7A//ZmGXJfhV6HM2+EzRGhQD7XtXiush456WRbQdg6CtDVWL6Kwx\r\nydq/wAUQwF1Z5UNZ3XqQWH66YfUNSzko8jdhAJ0obD4+oq5ZSkNK7gXFjaux\r\neUngiVHjPi48ZtlbtzR9oXQbVihgL9JZkP0ZxuYVO3+xhC9mVAF5Qx2yhmen\r\niW0VFXVJKrgZtjjQDqBgno5dMdaYqvEujhFKTmCH1dNxRbauHuwFC6T41yrk\r\nSI9+jKp077Z2g+vHrOCNMeiiki3PTMpwGdqcE1hiVyuaIs34wmwRznJDIFBt\r\nyYq4ZRak08hb6mfOurd1I1msqweZGW2sCW+RBcPyYxpNnhWvZy4GGr7nnztp\r\nIIpBCubWN4APcFEuXGYnzSsCu/18eUPXVtrhjyoUKPAxjAkoPychm+DZZsQV\r\n7xEgUum/diYX4l2tYhXg4RB2YAl/npalSPZey9fBmGG3BNjB1ATaLkmefSq2\r\nsh/JRmyQlaywY8YpoXuSZ/+dm4b9cSgoKNp6ubQyBB6K+v3F+shKQSZ1uXOQ\r\n901JY2B+ICWAUeDjjAcnq+1JmKnRgHBpL9gBpbIPQuSeT25Z5wMusbyLVa/M\r\n9Z7f1cZTS3N19zvlPRoe+yDUJHG8ohmwNbmRhPE7c5tAY0n5M1mFTqlxbUr0\r\nsopnUL0zkN8Cpyb1PwNrTYzTkkhK150T8ZA=\r\n=FE7v\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2301041800.0_1672907228905_0.8213977241527333"},"_hasShrinkwrap":false},"1.2301100345.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2301100345.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301100345.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"12a8a2eb9a3656064439da35b736023090e7c78a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2301100345.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-SOmbrYJy2Q00VKF+t0c1AEjuOz4ncsL0eSLm5fbemSxsAnmsvlbnKy/lp5r4ZpUDcN9mD/6N4H9hWwETB7SSCg==","shasum":"8302fb4a2b5f8d9033fa26f095dc2f703b318c2a","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2301100345.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIX0nak+hfRXpdfQ2RxUgH6vqDkbp/yPxS74ylR8/iiwIhAI4YbMuXy+pVibFwATkWrXydG5KNzj06HdJP3VHkmvyN"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvSFdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr39Q/+PlhbGnd6eginMpytGyAnh6RCn3XaLKgikbh6GHwJaPNCZXcf\r\nWmQgdjouz1oowhCMVCyIbVMLVRqlbtjvv80cG0kVz3j9ysqqjUPOxHTzE2PB\r\nulAqP/gb6c6mWj7xY068/J6LY4gsNZuXXTHdAaz0/jdkGIXd9OdNAkZfVYp1\r\nyn2w7rpLV1BEOsCXAtfJUfrQQDqQN+V7duQuGyUToGxwYAMt5XjgUZ0jzFiV\r\nTCpsaivOxqypOpky5wuklUehNO+nNripp32EL0sihQ2z4eU/jA1jx/vsxo1r\r\nG3gKzZK0sfGsGLJLTxyGwExmZDQUs9rGwwMt/gEKKO+Eaqpd3mvrm6YhJ8kv\r\nRUXgYvIKsZmqoOr2blGSncqOEGZqmb0kti89q8xHq+GXgoujUeroHhG2N/dK\r\nGZ/nAnL92JC18gUU0E2cTpXtiOqh2Ttax5eUAmKARvY7SdXPm0LIkpgo6Eb2\r\nErQaKLg9jylGulpHX2SLoacRSFusnEPAXWnWeyTOmSm8vaxqPnQuFTGQKNTP\r\nIGaq3WDmIldrMFnWKe6vmhWEbr5UQF3hltrITJlPkjHrRp8dfeyuOm1NuxkI\r\nlXrRbWcmH31WYa5+0peN8/RaEv1/q17Hder33wa4EQJYyKD7rJCNeOsWrMlb\r\nJXR8AqsYrbXgIuwPVQFqcAIiE9HojH5Njy0=\r\n=2MuP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2301100345.0_1673339229547_0.5179390557837378"},"_hasShrinkwrap":false},"1.2301112346.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2301112346.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301112346.0"},"gitHead":"290809452fa1006da1ea148fc925beb127bc65a4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2301112346.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-gIl/7spwED21QHEZjdrGU2wz+yLxQmzZbkSC9mIeX5fELC+1ekWp4FjjVDOgxuOa64qTp7vS04do8g0RxAolAg==","shasum":"24c0bb9cd35d35572a6e6bd7c5912edf4c373d55","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2301112346.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBspp+WqcDP7TcrK17wAbosPnBM+HYR28Wglpqbcg+smAiB2xj0Lf7ElVrN5K8Cd8yJMIh9xSl0VBwMSXv+bmb92zg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv8TaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpatQ/8CmgF6yTWitd41BZb+MNDY2l7lgPAvb0Y1zNnQNt7ltVoOEE+\r\nDBn56MtCWKnK7WLV1m6TGRdIRmUlFB5p/3O6B70EU1XVwFLC90DbAtytOQef\r\nfjhOMdeVazWzccPWOxRTIJeewsXFIjx6vHMdS5hk2FrHgU80d0d4EQF8UmWO\r\nTng3tqmAa7CN6dpbczO07yBEOzu44HbImnVdU3m++n9T8/bn5HC9yKcv9sJd\r\n0/zYf2nQQ+5mZWgTt8dTR/Qe3I3EajNRh8Bm/FREVrqZPJbqsvff/t0f60R+\r\nR3MoH8hcZnr/Tm7lGSgDOAEMMBpXUxPC5NUyI1hULc+3pYXd13wr33ghMUyy\r\nVD5p3mRBlIPtX5JKX6+H6ht+odTEjZDRZdk8ReJeJE1Axwgc8TB5OQi9Umu2\r\npuwRK183VXRinEC04p2mIAW+CEEWxEGpU6uBnR5BExtEJ7WvJHF1mU7JI6PK\r\nBfcwIKhX2COjYN7Mrb+8MynPMaPiTkMUG7U0arGyVWgasWLsKQY3wkVl1WCU\r\nC5Ein0OaDR+xu3H73ir1gxm5MzipGuNr2me3ZsM3T2KLiKHz1ZJqOHaglyqw\r\ntUo9J7VxFjsC0wm3JuB+8h7zHeGk7O4tfRecSKPQ3s6YstgwDeHPbiVbkHrD\r\nWjtw4CNa76x6FKcn/4Smxwl9r6Bl4Gw2CDM=\r\n=Mvzq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2301112346.0_1673512154348_0.9999405831988277"},"_hasShrinkwrap":false},"1.2301181928.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2301181928.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301181928.0"},"gitHead":"8d4b04c8f4aed6f3fb83e6cdd785a334ecaa8a4f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2301181928.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-Gfx4O6HkJVuutcBCNAAVUL8L+13LEGU2qIALIh5ijX94CGPHJlvaJoz1kc2lElOFiSV6UwjpB0QPYlHOMn3DxQ==","shasum":"6f569ff4dd66e5692a5ae5f0256fb84a6bf3fd96","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2301181928.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH7/Pd7JLG+IXRB03PBmOR+PMeWh3mknojYn8hRChvj9AiB2CfyuKjYMk6a0vj6xfCn5FYWT1WSS4JGtJLwkKE5TtA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyP8EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXwQ/+OvO0TJMmxV8QB4JOHTpI9zRtvAPqkWcB2MXGwRO/2Knl/nkA\r\nwxlyInu6hDvtIduVE9tDqeW5vbUEG6VTPc6iNispQIkSwvp0b59UKIC9Cg/m\r\n9XdqTl0cWnVkVtJLFrZZYAzqz0nIUdM3h80VC38bDqSKmywmJkYsQoTB80K+\r\na1b9gJK7YfI7qTcq3SArVPjGpq9QDdlkSzh1g96fdmrAx2BJTn0Wcoz2fbVP\r\ns2o08ivP3xK7nK86tV21AEkMrN/w9Z9YJSMnETeTrOlB1Waj1hf1qfy+4Tfh\r\nED0l/q9jOrLC9/fJrIB67CQ16UY8z37B5IhOPrT85lc0DPtCP0svgIUNZdpU\r\nVwE4PAX1lanXHpbE7cBPC+11Xw3Y4mffp1jtBYUiXpl8eH6HalgKnViiMGO6\r\nqDqX5gfpRc+/WBJAt5UjH9cROKoinViB7xNC4rFM7udU9AR+Scouu8Ev2MGk\r\nK6MStNXrQY1JEl2ulCnh0qjAKjPWBJ1Txkx1qFYA4j046QtI/LVQ45sE5i0l\r\nhswR2rJdyAeTv7lsHFfe0+KWqIlK7KQ0hvnOtDSblBMyfNVhZ0GlUFBFyStA\r\n9Spq/1+6yuAV8X7luxMba8rCthNaNykGNZrkE//jRTVjIFfggdeSgsSiQttS\r\nLSDEZ95SzrR//JKh+/68CNY8JvhvRGRpKdw=\r\n=X6y1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2301181928.0_1674116867862_0.7505358449833284"},"_hasShrinkwrap":false},"1.2301261900.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2301261900.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301261900.0"},"gitHead":"a6ea9dbc37fe6d4b0f68e25838c857835dd4f7e7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2301261900.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-B+Fhr73x3JTvtkTS/frIOVwkAPtKGyhQvJrA6gU7tnDczk0PTzumoVj5otLeOTtdMdYVBpTsTlGGj1FkeIrAPg==","shasum":"4eb1046d319a8bac63c8ad9de6525850b54df466","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2301261900.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBiv2nqJxlMG6cH064JVEPPdzmujA1iiIaP+4fscr37AIgUtCrnLm7P7MEdavoAZoHaR6Ms2u9OXXhYYyQW69udRQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj04tYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmok6A//SSoCanyv7/FegSNhsDDnkE36vs0QsctFrq4KZgCcl5/+1rmj\r\nDKTaez7HO3LmVbVP0pgomyrouqp3nyzVQofNzy1g/oAZKcIpxqTwcoHkMONC\r\nc91lbXD3XEKuhb9OGpkuA9WHMIdPGSzAXqbnQZuS5n6OaBTxTuAI0eLIf1/F\r\nEXVsWPvkC10oQQ+71fDSdzrMHu/KymS5KBa4g9z+965mrF453vusQFZ0UIzz\r\nCn+8q6pNeUlqarirE4trHE9dgtahppmw2iSypz/vUa+E/EDKTJde8Q6blHXy\r\nCua5CyMShYgT3ykMjemXrAqcd61Vc06WZ5O2XLhPlEHT408ocI4QxEWH0TwE\r\nb02VwMwkmtV5EPZtcR3uOHtQrdMQSZNJjaKmH76nFFPCxHvG1btyQHJMTEC6\r\nZL8B7YwhfGRJ4bat/4x+zn64JwLveEMrzQyVoXNf4b46HHwo5NYjCGKqLZgk\r\nZXUNDXynvSwLjdljBk7p00QmUVf3FaeL2Yg6LUC+SpazE19HgeJKamh0PbVA\r\nbdGTAQ5vKSJCWRUuSY5BEEmnlSruKhheAQEU7eGFbVJ4uAEdTQzXkZjBufqX\r\nZ0uYgQkvVS2fR6YohkCD1lhE/QKmsdcdH76a7XyPoeQuY/jq/n3LNoqrqFGM\r\ncC3XWbIHbNbdama0HOwaMQkPezRRCQ1e2hw=\r\n=PWvl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2301261900.0_1674808151894_0.7387764810130211"},"_hasShrinkwrap":false},"1.2301301810.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2301301810.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301301810.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"06d7a2baddf76737d7cde110a7b4bb9351feb38d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2301301810.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-imHKFNNi+/9sviXunnHzFAC2OaxEM/jyGpl2LTguypoFUo9xuRyp04tVy+yTIfFGppDMxR6Tf0tqbsUWQyRRfg==","shasum":"8f9609a73b0baf42a6ab31f3e72cb47e8419faf8","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2301301810.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOJ36OshQn/3V9aDIdVvVl9zCx9InPaQLaKB9xlMN1NQIgYaTmBUpULiKhPwWkBVcz+1kZzgfwaBKsyb8FnyfcckA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2NEIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpIhAAhm6u+X9v/gdSqTW9U9u0Hput2cqeVRcgWhZEBvq2wikMzG9P\r\nSrkMnFTKywTRmTzWSTGNQvk+KBYjKovihCapPNudGTIRZmK/Bo7LKHPOgfos\r\nQRnMmHppA2wW5NRwQL9egDLLGp6m/VPlrKABwLynbG7ZO6YpcftGkfFRJtGl\r\n3dxWEWCQdsGOxPRI9+ojL86YNDxi3OmMHW7DZiY5JPK4xT27Ag2Rdr8Gn0xq\r\nsEUaeXyqaXOvKBYgPrWnpKo9LS2wuLD7yLKlB1a3wNKyd8oPMqprfAgEc2Av\r\nfQRB/i9Y4gXITN0+vcGpbASii+noWsiGiN4fizc+XP+iwxjYGXEkHHludd1K\r\nOBTkpptpDbuB43iiMOCTQkE3OU3BzueHiTdynN0OR84ZViZcxNsu9PWpskTz\r\n0PL8wmzizVKoKXlGGiXb+vkEV49e4VtXNuaW2ATjkaH3pS95V3pPDtb0zEly\r\niS2LoJJPkvG/nyJeQBM7wfKs5IRcPQUET6BKJQRIvvRQIA6oZOWwwKTeI0MD\r\n+c5/iOFujtHGr0nnqCaku6sZnPzvaIXDKbV5fszGWP4o0C2wHXdFlCMsA2t4\r\n2DfQv6ZiKo3TV10sEP8J9qijESlCNGcUQQuA2kww5+piiYwX3forIhnl2an5\r\ncDjp40wwof+kLzBj+9FSf6POc67hWFyZx6Y=\r\n=JJQS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2301301810.0_1675153672361_0.4024439992695803"},"_hasShrinkwrap":false},"1.2302012254.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2302012254.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302012254.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"e4c14ac075b71415995f07a6bcc3ca93a8af5cc0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2302012254.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-I25FOY9WeC+riYbuNmoiYE2gAWhQFqFOfRESaqhb7x9r2cMwbrbFNl7MCwf2Ac3+trgs5zpPPz4fHFkkPP4/Qg==","shasum":"8ebefa23cc7e665dbe3d56a02794322dc4dea7d6","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2302012254.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3gH/3VrV4mLjU08k/OC+BUo0qdsZNMuzkPCagwXObrQIhAPl2/5qw9yRtuiBGJiREnEUzqCj+9Sa+j+y3r1ndU9hO"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj23PLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr53RAAgwP4wtI6G0blEGEMjUpl0nGAPeqHrJU0oV05xxfBv8QPbM1A\r\ntOV07YRbeCaGOQKbOdPnX0plaVdiBVDPm52TRitbGMWzitRZq7l4M/2ZDDSC\r\ngVa0rMPkma0Y51rBqS6QG2bhOe9TRoe3e3l3QYhhhWUYHF3I6L4dHxTEF0Ar\r\nzF8Gwn7ThRyFYRF5yrYe6EU1WeS742UG2VkjC+C6ppAS/fvl0aDC48XdzION\r\nCUv+ObDwqfFRhjcybLvXf+Sf+YVb/iktjuHIbJIgqwjPtAUz7GWJEx+Nkeqt\r\nUNLb4R9SGXjEgo24Z0qmrFpyANsdTSBJIJE9m/iK3i3GBIS1DUd28G9tnoDg\r\nonhjn0ynNQmMYeVbTNardkI4hnMNJcsP2q2dXl947+JioUo5RPt69M8Qrb1/\r\nJuF34ZYZrra5ScKE4xb2gdK7kJQGVuTTJLsCRcZNso8Ku1RKdMXzgQ2dda/Y\r\nibc93os75IwjMzZHQ7d8JlN1Mn3T/z4Vye7HtN7Ay7PIVODJRkHp/zUHInX9\r\n4DAoUKydht9AQSgg2QFGz3y+5p1yTKfM5eFoFRJWdsAH+e6/VLJR3FZCZDDe\r\neSSm+YGRVI7877BzF5mXaKQsC8ZwhATE8JoMEoEXXvYMyL53MAspPUhtDkJ/\r\nxNoi5U5J/FUWChpocjTbfrUtcEol61Z3JQo=\r\n=naLl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2302012254.0_1675326411600_0.8570875636308961"},"_hasShrinkwrap":false},"1.2302021743.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2302021743.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302021743.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"a27cd72c15b628053806c94efc4c96730603dbd5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2302021743.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-HWMtF8yvEBC2EHYjkcYUE14Y8JPnHWTtPyymSiJWi1FifyTJFU9dLz3VVUqVpdjrWyBdRnLextBh4JUqdjsZBA==","shasum":"89b19f891893671d5d442d1cff01ea6de42e5252","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2302021743.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGT7wKpSEAHQ+VILxc9x8AqAqLNJwtlcpqNJc5etImM1AiEAtVf6kKswkWJmNpJM/NlZZnm9FjK5gY/b0h8MqM2su2E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3MWjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreSg//c958hyXXi9FNhd6oj6+77vWSwz59TKsaY8Is3FgcITZLgS8N\r\nBipN0gDK/dgQSVQhLZijibOP6RVtLtDdj7A37ug+l+RXQEsrOTGn6HeUsN0d\r\nUBQ0r+ZUgXgfhZltadkXIH5+hlfub2w1OVuWxu75LYz0K82Gqkhk4+BHUp2O\r\n7EB+eT34Q0tWcbsfHZjRyW/69YrR29ehJqYDHKt88li7AmyhzWyaN33itBaS\r\nvyBDTioVCXlHgmnMAqA15Zumw2qbRvhCKnqG8ArmTQ1cwr2PJ4Ry9klAlTwZ\r\nwYWDL0xTqTrCSDxPNZbfGl/Ton/act0T1Cgw1FnswV7aS3TRnyh0Bq2Dvmtt\r\nYu7iHr18Nps0w01Ro2NfSd0Y0FkVw62jTK3k/toLFJj8WFqhZkA3xDutOm9I\r\nGoRGydToOP9Cib6MgckBdPqHqRP08GQckBIJNbVs4mBqZb7uffdS5UvkXGr+\r\nD5S/TBJ2FyUl4PMz55piPTsrF3JpEYG/Dq8j3j3HVNpMEgZqS92bWRYk1deb\r\nnadHHIazNBCmcuZXFAuGfxNy1ExnSBnizpR0BHFo4stZq8EIP+nv+JFcuXNj\r\nG+XnTnoV9PpJrsvatMWiPAqjvPpwPYb2LRDHFoZwl4Cfg93nh81ZKfFO731O\r\nH2kbdMwxZmnE60ZjyZJTHvCC3CwjY0Mo4/0=\r\n=y20J\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2302021743.0_1675412899000_0.36682391003710224"},"_hasShrinkwrap":false},"1.2302031721.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2302031721.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302031721.0"},"gitHead":"f8cbfb0c4e4db6b8dea923c0afdf75aa7888e4b8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2302031721.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-oEN+2/n5MWZkkR8Xur0xMPiL4o8h0DKb0Bge/hVPCa6wmllmUcwCPMBWzEFFNV+38B331mGB1VN9++xadIFTZw==","shasum":"4c397303f8eb38054fd1045d287c980e23829954","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2302031721.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnWh17zucP9zOf0EVaF1SbS7Rqk3X5amOMt9tE7UhrigIhALtWS8heJscruzBHk4pB+PSR3/JqdDNVweAul/gkIzTX"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3haIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpONg//XAtIt8FSKnyVhZULllckD9V5mnQl4GeR/ZEfxOP5fKdlezOp\r\ng1VVNULGhYNWWTA5QUDgnynCzyrra+tqrGVj9h7E29k5zAM+wnBXW3+AhGi5\r\nor87ER5Ey0mdoKqkNzDbdYr9Vtqmv4c8vEVLdr+ooSdOjlVhsDytuCODSx1s\r\n63cFkP5LiYwYn0dJH7/WsBCOMiRqBqLnP0UadnsoCMYaGyL5Hd2ToyfXCN/j\r\nR3KX9v4WXC+al77/g7Dh/YDd4K5a6Mvl/yQzzq0Otlodw/ZcpKz4X33ZkLbw\r\nMxstQaTTccCrtGHqPxXvEzbgTc1LxAGNispWO3zjnXaPhwPEdq1VZLqUVOe6\r\nziBRUlFCC6XSy3rHNI4A6v05ScGrZH+oYNdq6wUatVmsd2MDZG7ej9CahwVf\r\naro5KjalCypIKx3+je35EAIq87wMypjspC4fLSivtQvUKP+HucvfvYhqk5ZY\r\nsmwWqxvMoJo8HFdGfe2Qy4ZwXRGGu0vcf07HbbyBvFVeiTAhGftJjbUcOJa2\r\nzjXLCUmMhjng/CrRzF5fR2y+4yb0jrCCTDFt2BpHdfIR8f9QQT5rYKPGtNVh\r\nkorVdzvd6KHf3eRu38PTCHeTDmkA+54DaG4qbsdjckk6D4PAqpwBf52ZMXIr\r\nhJY0gBEUar/s48QMYCOuiIYXdfMSQG0tD0o=\r\n=sd4Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2302031721.0_1675499144493_0.9636472971287569"},"_hasShrinkwrap":false},"1.2302171719.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2302171719.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302171719.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"767b9ceecbb9759948c2b0db6f66c49097659f98","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2302171719.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-wlyEBn7fLZJQOPeuo75XvxwaiKro+iTi/1G9wt530057vjtHPk17/yLHDLF6vLTPsNdsM4iWo/5UPkfuXoYpHg==","shasum":"19449c9a443802526c5dc0d528f8d3c277c3cfcc","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2302171719.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbUuQsjpTTZeXjuYNo9dQ42+xbc4m101IfDkCjd5BfPAIhAJVIWQEcRrASqbxoTys7gDbdIAdlw5ZrHcbdLrFmsrYf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8ItMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmYw/9GHrxP2iOjMeMau0jOIMtcCX71VE4BlQmxQqK9TRgv2KenNqt\r\nn5+jXVGVXD946qhBhQXAq0rcVVBsfja1b3iMrq/JK8dvRSdbVz40YSD/gcrG\r\nIfi55P6m/i6WLRNlEjhp1x2wyPrFsO4KB42JiMclliyh8QVhqnyCRgrGwBzU\r\nIhcWtJTt78F0UwWpgPU03qihZne9lYR6dVTTHC8zBQro+tJ08pBV3tKhYo/z\r\nHErCiQDC6BBUI0i9zyK/in+MyLfrEUpsESOO/5CnJNoPLxp0USrLEqh/tnp6\r\nLmVEztZf7eFtVpvkzME6mNxVMh6l7VSYONTPgF0gtPq82mh8xkW5Qdlg6wnJ\r\n9szXXfEbv2usWAusDse4gWGbSIbOAVLTIFxClAOSxCdOJtoB4BBImV/xIflW\r\naFqF1tVR6B9bjd9P9v1jOaXioJwsuUxdoJwnuAnYND8vmhZuw98VMQO+wadH\r\nfu+rNgjtG5flnoA1buCdUabqIxxHiNfB1igssNpWtOryKS/yVJUTHkmwkii4\r\nbQeBuM/odIpZAP26txNat2VMv+o25B8eOwVWn2we7LD6CiqS7M5+MZhBTUaM\r\nkQ6DEhuyOAKJRFEqdna9nKTF0aEuZLQzqay5CHT4WXkzczvqk6CaldHbG7B/\r\nvjorGXceoQSzP5vtaQUPolRY8/4V2FiyKDc=\r\n=bwpS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2302171719.0_1676708684417_0.9624764929831406"},"_hasShrinkwrap":false},"1.2302271541.0":{"name":"@bentoproject/lightbox-gallery","version":"1.2302271541.0","description":"Provides a modal "lightbox" experience for images.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./styles.css":"./dist/styles.css","./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302271541.0"},"readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md","gitHead":"13cfe7f4354a82bebe08fd29496c4c7de848a18b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/lightbox-gallery@1.2302271541.0","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-2IXzdy3qtUFnujNI1a/diFIFrpHci8SHybG5tGVaJOPFrgV5YTCYKBDNT9YikFg6mnHfGS8b0P8xq2rsC9TxMw==","shasum":"5a9849f4571b6e92bc8d8143920bb3dede385717","tarball":"https://registry.npmjs.org/@bentoproject/lightbox-gallery/-/lightbox-gallery-1.2302271541.0.tgz","fileCount":31,"unpackedSize":1733536,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEUOQE/m+yJ+96h7kXOqjKzZHpwoZq7etws2iUzeBxXAiEAmX8HfPnhG8QTlqbgpSwfI413vON1rRUZnRYaYly1gkc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/jlhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqShAAn+80+s/1aU+D0m0pZ8sfds4yWLBE8aLLodTVq6YDwLM1rMTY\r\nrt3weHyNAOL5JsRpul8RfGDv+Qk/kiH6w+8Kj55+rWaUK2NtYH7dzfRNVccy\r\nqLh0Y/K2TSIZPAMmpoC4RFSmD3yi+moZ7IROI7xrsgZ5bsrTgPhCp0+hpu4/\r\nHvFLWnEdO4cBpEF9jf0czATZVVFbGfqVgpn+xIfU3G6KtHZRB1l7VT7Xutbr\r\ngP17bk1DC7Wi2UUGb6dFics4gbaMyDnaTcPPfgPbVpG9jpoqlFza6rDTNkKa\r\n3hP7r9c+4/EjKueR8mcfeisWiJnyR0ormLjX9+QkEcbiq+cOEWo4AAjN5Sg/\r\ne5K3/PyNs7zvgtaSxLOE/8OvlYxAnfq4MdpfhXNbOeXW17q5TvULsvIBw0Uh\r\nn8pjO7W7mcHcVphwLeDNJrQuoGKDQX8+lqzedmOsiyZnBzRAX1foKP8HIPfL\r\ngFjl6f5kiv1DGpBtQJBAr+PzIYvXU7j0GOuxAOY9hLpIikZ/ar0Rpjrokq88\r\nZ9EvjyDnOisBw+Pp6jajrLRQNH8Dnz8XHw0EgV4ukgcTiby4qoh8QSRqg4gl\r\nufPnUfvSuDase2YoLlgzrthBShFfXlTNf21zraqvD9PpqnpvoPIm86NAA+XO\r\ndjZ7panasaq361JaP1TCSkKw02PRjaDbChc=\r\n=ZncN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lightbox-gallery_1.2302271541.0_1677605217631_0.7448002938973823"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-28T18:19:01.255Z","1.2110261518.0":"2021-10-28T18:19:01.487Z","modified":"2023-03-07T18:43:27.119Z","1.2110252343.0":"2021-10-28T21:47:04.151Z","1.2110281959.0":"2021-10-29T11:51:31.713Z","1.2110290545.0":"2021-10-30T11:21:22.520Z","1.2111011823.0":"2021-11-02T11:25:41.512Z","1.2110152252.3":"2021-11-02T22:04:20.134Z","1.2110212130.2":"2021-11-02T22:14:31.859Z","1.2111022043.0":"2021-11-03T11:21:16.805Z","1.2111180040.0":"2021-11-18T21:29:45.121Z","1.2111060251.3":"2021-11-18T21:42:16.729Z","1.2111182332.0":"2021-11-19T12:24:20.541Z","1.2111060251.9":"2021-11-19T16:31:58.316Z","1.2111191951.0":"2021-11-20T12:24:05.648Z","1.2111230244.0":"2021-11-23T12:24:42.414Z","1.2111230636.0":"2021-11-24T12:22:33.356Z","1.2111242025.0":"2021-11-25T12:43:01.040Z","1.2111292120.0":"2021-11-30T12:40:35.716Z","1.2111152338.2":"2021-11-30T17:54:56.184Z","1.2112010058.0":"2021-12-01T12:19:02.224Z","1.2112012300.0":"2021-12-02T12:30:49.012Z","1.2112021656.0":"2021-12-03T12:22:17.079Z","1.2112032204.0":"2021-12-04T12:20:07.852Z","1.2112062322.0":"2021-12-07T12:27:38.531Z","1.2112062322.1":"2021-12-07T21:39:07.531Z","1.2112062322.2":"2021-12-07T22:29:07.898Z","1.2112080230.0":"2021-12-08T13:21:32.071Z","1.2112080230.1":"2021-12-08T15:58:11.217Z","1.2112082232.0":"2021-12-09T12:45:47.227Z","1.2111242025.1":"2021-12-10T00:11:38.898Z","1.2112091956.0":"2021-12-10T12:46:49.714Z","1.2112102136.0":"2021-12-11T12:32:11.179Z","1.2112132331.0":"2021-12-14T12:59:27.166Z","1.2112160003.0":"2021-12-16T12:19:59.071Z","1.2112162055.0":"2021-12-17T12:18:14.948Z","1.2112170012.0":"2021-12-18T12:17:47.403Z","1.2112201724.0":"2021-12-21T12:21:28.422Z","1.2112212349.0":"2021-12-22T12:23:56.613Z","1.2112221739.0":"2021-12-23T12:18:51.524Z","1.2112231523.0":"2021-12-24T12:20:18.682Z","1.2201042109.0":"2022-01-05T12:31:31.725Z","1.2201052144.0":"2022-01-06T12:41:34.795Z","1.2201061922.0":"2022-01-07T12:32:21.942Z","1.2201071715.0":"2022-01-08T12:22:19.763Z","1.2201101902.0":"2022-01-11T12:30:04.943Z","1.2112231523.1":"2022-01-11T19:25:20.959Z","1.2201120015.0":"2022-01-12T12:31:02.307Z","1.2112231523.2":"2022-01-12T22:39:11.611Z","1.2201122239.0":"2022-01-13T12:59:47.116Z","1.2201131702.0":"2022-01-14T13:04:07.877Z","1.2201141909.0":"2022-01-15T12:21:37.007Z","1.2201141909.1":"2022-01-25T19:49:32.188Z","1.2201141909.3":"2022-01-26T20:58:59.990Z","1.2201141909.4":"2022-02-01T21:38:14.061Z","1.2201212122.3":"2022-02-02T17:58:37.269Z","1.2202012258.0":"2022-02-02T19:13:07.717Z","1.2202022130.0":"2022-02-03T16:59:48.493Z","1.2202031816.0":"2022-02-04T15:46:52.975Z","1.2202042210.0":"2022-02-05T09:18:42.577Z","1.2202072236.0":"2022-02-08T09:20:39.166Z","1.2201262038.1":"2022-02-08T21:13:15.021Z","1.2202082004.0":"2022-02-09T22:16:59.462Z","1.2202092050.0":"2022-02-10T17:57:26.134Z","1.2202112230.0":"2022-02-14T21:06:11.372Z","1.2202142035.0":"2022-02-15T09:25:20.227Z","1.2202042210.1":"2022-02-15T18:23:51.408Z","1.2202152253.0":"2022-02-16T09:08:54.953Z","1.2202162256.0":"2022-02-17T09:29:44.794Z","1.2202180255.0":"2022-02-18T09:44:59.788Z","1.2202230359.0":"2022-02-23T09:29:59.516Z","1.2202232232.0":"2022-02-24T15:22:54.441Z","1.2202241911.0":"2022-02-25T15:18:02.491Z","1.2202252101.0":"2022-02-28T16:46:58.118Z","1.2203041950.0":"2022-03-15T18:37:46.566Z","1.2203151539.0":"2022-03-16T08:23:56.492Z","1.2203172113.0":"2022-03-18T08:25:10.559Z","1.2203221937.0":"2022-03-23T08:27:02.375Z","1.2203231914.0":"2022-03-24T08:25:17.787Z","1.2203101844.0":"2022-03-24T20:11:49.810Z","1.2203281422.0":"2022-03-29T08:30:05.673Z","1.2204121632.0":"2022-04-12T18:17:14.468Z","1.2204122000.0":"2022-04-13T08:33:02.512Z","1.2204132005.0":"2022-04-14T08:34:40.175Z","1.2204142048.0":"2022-04-15T08:28:44.367Z","1.2204160405.0":"2022-04-16T08:25:39.282Z","1.2204182206.0":"2022-04-19T08:31:30.996Z","1.2204191429.0":"2022-04-20T08:33:10.303Z","1.2204211736.0":"2022-04-22T08:27:33.205Z","1.2204221712.0":"2022-04-25T14:02:19.493Z","1.2204252045.0":"2022-04-26T08:32:59.775Z","1.2204272205.0":"2022-04-28T08:33:05.179Z","1.2204281949.0":"2022-04-29T08:28:47.516Z","1.2204292129.0":"2022-04-30T08:27:04.872Z","1.2205031420.0":"2022-05-04T08:27:43.780Z","1.2205041533.0":"2022-05-05T08:27:56.446Z","1.2205051832.0":"2022-05-06T08:27:39.708Z","1.2205090810.0":"2022-05-10T08:33:36.856Z","1.2205101904.0":"2022-05-11T08:33:20.976Z","1.2205120110.0":"2022-05-12T08:32:23.359Z","1.2205161914.0":"2022-05-17T08:28:20.265Z","1.2205181800.0":"2022-05-19T08:28:33.088Z","1.2205191749.0":"2022-05-20T08:28:31.212Z","1.2205232225.0":"2022-05-24T08:27:29.257Z","1.2205120110.1":"2022-05-24T19:14:13.631Z","1.2205251942.0":"2022-05-26T08:28:07.293Z","1.2205270638.0":"2022-05-27T08:27:33.378Z","1.2206071918.0":"2022-06-07T22:28:53.478Z","1.2206072228.0":"2022-06-08T08:28:25.792Z","1.2206082301.0":"2022-06-09T08:31:46.667Z","1.2205270638.4":"2022-06-10T21:36:06.236Z","1.2206101637.0":"2022-06-11T08:27:33.859Z","1.2206131450.0":"2022-06-14T08:29:14.032Z","1.2206071918.1":"2022-06-14T21:28:41.239Z","1.2206162023.0":"2022-06-17T08:28:39.112Z","1.2206221455.0":"2022-06-23T08:29:14.257Z","1.2206291614.0":"2022-06-30T16:09:13.600Z","1.2207071723.0":"2022-07-08T08:34:56.148Z","1.2207181727.0":"2022-07-19T08:27:58.313Z","1.2207201724.0":"2022-07-21T08:28:22.901Z","1.2207221643.0":"2022-07-23T08:28:09.752Z","1.2207261725.0":"2022-07-27T08:27:47.243Z","1.2207281718.0":"2022-07-29T08:30:24.965Z","1.2208021808.0":"2022-08-03T08:28:38.211Z","1.2208042017.0":"2022-08-05T08:30:34.981Z","1.2208051912.0":"2022-08-06T08:29:31.963Z","1.2208081650.0":"2022-08-09T08:29:13.885Z","1.2208092047.0":"2022-08-10T08:29:05.982Z","1.2207281718.1":"2022-08-10T16:59:06.377Z","1.2207281718.2":"2022-08-10T18:17:17.565Z","1.2208112015.0":"2022-08-12T08:29:18.034Z","1.2208121708.0":"2022-08-13T08:28:01.802Z","1.2208051912.1":"2022-08-16T23:06:52.546Z","1.2208172101.0":"2022-08-24T20:56:59.131Z","1.2208242209.0":"2022-08-25T08:28:43.473Z","1.2209072154.0":"2022-09-08T08:26:13.146Z","1.2209131909.0":"2022-09-14T08:45:20.736Z","1.2208242209.1":"2022-09-15T16:44:32.448Z","1.2209142312.0":"2022-09-20T22:08:57.033Z","1.2210010655.0":"2022-10-04T16:51:31.399Z","1.2210041838.0":"2022-10-05T08:31:05.714Z","1.2210052034.0":"2022-10-06T08:27:38.386Z","1.2210071758.0":"2022-10-08T08:26:53.656Z","1.2210112333.0":"2022-10-12T08:26:08.566Z","1.2210142102.0":"2022-10-15T08:26:09.839Z","1.2210172057.0":"2022-10-18T08:28:43.037Z","1.2210191347.0":"2022-10-20T08:26:47.160Z","1.2210211855.0":"2022-10-22T08:25:03.454Z","1.2210251605.0":"2022-10-26T08:29:41.524Z","1.2210272257.0":"2022-10-28T08:28:13.671Z","1.2211042305.0":"2022-11-05T08:26:08.449Z","1.2211060024.0":"2022-11-08T08:26:54.264Z","1.2211111611.0":"2022-11-12T08:25:37.766Z","1.2211151402.0":"2022-11-16T18:45:23.055Z","1.2211182146.0":"2022-11-19T08:27:04.087Z","1.2211250451.0":"2022-11-25T08:26:28.716Z","1.2211302304.0":"2022-12-01T08:26:11.853Z","1.2212071834.0":"2022-12-07T19:39:32.900Z","1.2212092023.0":"2022-12-10T08:26:52.049Z","1.2211302304.1":"2022-12-13T21:54:27.987Z","1.2212151632.0":"2022-12-20T15:53:48.083Z","1.2212151632.1":"2022-12-20T20:11:30.716Z","1.2211302304.2":"2022-12-20T22:33:48.044Z","1.2212151632.2":"2023-01-03T18:14:41.030Z","1.2301031703.0":"2023-01-03T20:31:58.131Z","1.2301032153.0":"2023-01-04T08:27:15.584Z","1.2301041800.0":"2023-01-05T08:27:09.123Z","1.2301100345.0":"2023-01-10T08:27:09.828Z","1.2301112346.0":"2023-01-12T08:29:14.506Z","1.2301181928.0":"2023-01-19T08:27:48.619Z","1.2301261900.0":"2023-01-27T08:29:12.142Z","1.2301301810.0":"2023-01-31T08:27:52.627Z","1.2302012254.0":"2023-02-02T08:26:51.806Z","1.2302021743.0":"2023-02-03T08:28:19.228Z","1.2302031721.0":"2023-02-04T08:25:44.734Z","1.2302171719.0":"2023-02-18T08:24:44.637Z","1.2302271541.0":"2023-02-28T17:26:57.844Z"},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"description":"Provides a modal "lightbox" experience for images.","homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-lightbox-gallery/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-lightbox-gallery/1.0"},"author":{"name":"Bento Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"# Bento Lightbox Gallery\n\nProvides a modal \"lightbox\" experience for images.\n\nWhen the user interacts with the element, a modal expands to fill the viewport until it is closed by the user.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. As a web component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoLightboxGallery} from '@bentoproject/lightbox-gallery';\ndefineBentoLightboxGallery();\n```\n\n### Import via `\n\n\n\n\n```\n\n### Example\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
\n \n
dog wearing yellow shirt.
\n
\n
\n \n
\n
\n \n
\n \n\n```\n\nTo use `bento-liightbox-gallery`, ensure the required script is included in your `` section, then add the `lightbox` attribute on an `` or `` element.\n\n### Add Captions\n\nOptionally, you can specify a caption for each element in the lightbox. these fields are automatically read and displayed by the `` in the following order of priority:\n\n- `figcaption` (if the lightboxed element is the child of a figure)\n- `aria-describedby`\n- `alt`\n- `aria-label`\n- `aria-labelledby`\n\nIn the following example, `` displays the `figcaption` value as its description, showing \"toront's cn tower was ....\".\n\n```html\n
\n \n
\n toronto's cn tower was built in 1976 and was the tallest free-standing\n structure until 2007.\n
\n
\n```\n\nIn the following example, `` displays the `alt` value as its description, showing \"picture of cn tower\".\n\n```html\n\n```\n\n## Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-lightbox-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-lightbox-gallery');\nconst api = await lightboxGallery.getApi();\n```\n\n### Actions\n\nThe `bento-lightbox-gallery` API allows you to perform the following action:\n\n#### `open`\n\nOpens the lightbox gallery.\n\n```javascript\napi.open();\n```\n\nYou can open a specific lightbox gallery group to a specific slide by passing in extra arguments:\n\n```javascript\napi.open(1, 'toronto') // opens gallery with images in the \"toronto\" group to the 2nd image\napi.open(null, 'toronto') // opens gallery with images in the \"toronto\" group to the 1st image\n```\n\n### Attributes\n\n#### lightbox\n\nSet `lightbox` attribute to an id to assign different images to different groups. For example, in the example below, clicking any of the `group1` images will only show `img1.jpeg`, `img3.jpeg`, and `img5.jpeg` and clicking any of the `group2` images will only show `img2.jpeg`, `img4.jpeg`, `img6.jpeg`\n\n```html\n\n\n\n\n\n\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\n```\n\n---\n\n## Preact/React Component\n\nThe preact/react version of the bentolightboxgallery functions differently than the web component version. The following example will demonstrate the use of `` as a functional component.\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/lightbox-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\n### Example Using BentoBaseCarousel\n\n`` can be used with a `` child in order to lightbox all of the carousel's children. As you navigate throught the carousel items in the lightbox, the original carousel slides are synchronised so that when the lightbox is closed, the user ends up on the same slide as they were originally on.\n\n```javascript\nimport React from 'react';\nimport {BentoBaseCarousel} from '../../../bento-base-carousel/1.0/component';\nimport {\n BentoLightboxGalleryProvider,\n WithBentoLightboxGallery,\n} from '@bentoproject/lightbox-gallery/react';\n\nfunction App() {\n return (\n \n \n \n \n \n );\n}\n```\n\nFor further examples of how to use the BentoLightboxGallery please check the storybook example found in (Basic.js)[./storybook/Basic.js].\n\n### Props for `BentoLightboxGalleryProvider`\n\n#### onBeforeOpen\n\nA prop which takes a function which is executed before the lightbox is opened.\n\n#### onAfterOpen\n\nA prop which takes a function which is executed after the lightbox is opened.\n\n#### onAfterClose\n\nA prop which takes a function which is executed after the lightbox is closed.\n\n##### onViewGrid\n\nA prop which takes a function which is executed when the user enters the grid view.\n\n#### onToggleCaption\n\nA prop which takes a function which is executed when the captions are toggled.\n\n### Props for `WithBentoLightboxGallery`\n\n#### enableActivation\n\nA boolean prop which defaults to true which lets the child image activate the lightbox experience.\n\n#### onClick\n\nA prop which takes a functhion which is executed when the image is clicked.\n","readmeFilename":"README.md"}