{"_id":"@bentoproject/stream-gallery","_rev":"245-156250023cff5dce87da3d678fefb3d7","name":"@bentoproject/stream-gallery","dist-tags":{"nightly":"1.2305241828.0","latest":"1.2305051745.1"},"versions":{"1.2110261518.0":{"name":"@bentoproject/stream-gallery","version":"1.2110261518.0","description":"AMP HTML amp-stream-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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/SrwIcJEmBaJpRCB5Sya7iXB1kqou6B1PuGWE905Xj+ub7pkaTbp8YboIy7wMhGxgIOCJfclhlkDZV9svRyn/g==","shasum":"760611bbd336129760e0e6495c879d61323d239f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2110261518.0.tgz","fileCount":28,"unpackedSize":3095131,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChUZR4Y0qhux8OySTToILd1PjTxmufuTXCU0oh1/gUcAiAxjWeYIlXtRyovB1jMbKWp/8orJG+bQDyHTz1KQcKSAw=="}]},"_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/stream-gallery_1.2110261518.0_1635445077063_0.5946096368097846"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/stream-gallery","version":"1.2110252343.0","description":"Bento stream-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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\n## Usage\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis. To implement a more customized UX, see\n[`bento-base-carousel`](../../amp-base-carousel/1.0/README.md).\n\nUse Bento Stream Gallery as a web component ([``](#web-component)), or a Preact/React functional component ([``](#preactreact-component)).\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n#### Example: Include via `\n \n \n\n\n \n \n \n \n \n \n \n \n \n \n\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n##### Actions\n\n**next()**\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### Attributes\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n#### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery\nfreely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n##### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n**next()**\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n#### Props\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"57e62ecc0e24bc2cd64467dba9d0f9836eea0182","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2110252343.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-DBbQMBIXbPySY47fRbExUfXUDHLlQzpa2oYTxDvd97+xKtqh6mzMblJR+nXFpH+vEef6rG4B9LxGXKggit+Kdw==","shasum":"92484da5b8e656adf054e3cd450b01e301e94588","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2110252343.0.tgz","fileCount":28,"unpackedSize":3095111,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBH/mOqNb1ql4ltv5KlFXiVgBObU+GgQEB8KmRQqE2qeAiB+7ND/5MhjphIFxN986t6jFH7XF+fGBj6x2oeaYkvmVQ=="}]},"_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/stream-gallery_1.2110252343.0_1635457636161_0.7611126613173209"},"_hasShrinkwrap":false},"1.2110281959.0":{"name":"@bentoproject/stream-gallery","version":"1.2110281959.0","description":"Bento stream-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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\n## Usage\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis. To implement a more customized UX, see\n[`bento-base-carousel`](../../amp-base-carousel/1.0/README.md).\n\nUse Bento Stream Gallery as a web component ([``](#web-component)), or a Preact/React functional component ([``](#preactreact-component)).\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n#### Example: Include via `\n \n \n\n\n \n \n \n \n \n \n \n \n \n \n\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n##### Actions\n\n**next()**\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### Attributes\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n#### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery\nfreely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n##### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n**next()**\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n#### Props\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"55fa3e004e2aeece5faf9a68717228077c215a13","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2110281959.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-XilJ1I380OlmYtJ10j5rWaQHK2b3uR/DuxNoXzgs2F9/vmazJYD8FTn1rd7Qii0mFAw4VW6387nxTBV2OFDzVg==","shasum":"62b7533bb84ab9bc42a5206516372de032c32a07","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2110281959.0.tgz","fileCount":28,"unpackedSize":3095111,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFzwypV/jqPo66UYsXDz3o3MZNzYDdGwoxmsfNAQODl/AiAMTvyNdiJhdOKc7kX3yX0asXBUiUUK1zBfdBs3c7RN8w=="}]},"_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/stream-gallery_1.2110281959.0_1635508336187_0.01953812873826677"},"_hasShrinkwrap":false},"1.2110290545.0":{"name":"@bentoproject/stream-gallery","version":"1.2110290545.0","description":"Bento stream-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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\n## Usage\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis. To implement a more customized UX, see\n[`bento-base-carousel`](../../amp-base-carousel/1.0/README.md).\n\nUse Bento Stream Gallery as a web component ([``](#web-component)), or a Preact/React functional component ([``](#preactreact-component)).\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n#### Example: Include via `\n \n \n\n\n \n \n \n \n \n \n \n \n \n \n\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n##### Actions\n\n**next()**\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### Attributes\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n#### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery\nfreely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n##### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n**next()**\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n#### Props\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"1cc07336e186d25fc5fbfb2e8f7e12c4a5c79fe9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2110290545.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-sAtwtIlsCR3i/68/ggnScMqF7OKp7Sh8aWdPCTIO+v+ii8RCIHj56V3k69nwO8PJdewnoH1NH8yB7vvrUHGsDQ==","shasum":"bb73094fa1cc38d442c4095f0a3a71da83281493","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2110290545.0.tgz","fileCount":28,"unpackedSize":3095111,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxXqEOIgsesHHi7PcTpZqJok38JLguikBtl+YdhfBK1QIhAOIZfLu4Fwi5/MqQsmSQD61AhBY6yObqkom2yndCrmBt"}]},"_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/stream-gallery_1.2110290545.0_1635592885395_0.07809210146279266"},"_hasShrinkwrap":false},"1.2111011823.0":{"name":"@bentoproject/stream-gallery","version":"1.2111011823.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis. To implement a more customized UX, see\nbento-base-carousel.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\n## Usage\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis. To implement a more customized UX, see\n[`bento-base-carousel`](../../amp-base-carousel/1.0/README.md).\n\nUse Bento Stream Gallery as a web component ([``](#web-component)), or a Preact/React functional component ([``](#preactreact-component)).\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n#### Example: Include via `\n \n \n\n\n \n \n \n \n \n \n \n \n \n \n\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n##### Actions\n\n**next()**\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### Attributes\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n#### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery\nfreely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n##### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n**next()**\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n#### Props\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"7bd4192edeb4ded8e78291b094118653b1a78939","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111011823.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-AYQSMmVYr8d3Syu3PIQyKO8AocUipH/n0JblDqzEHl5pKCwLy6DtIjfQ79rVjZuBuxqzpIdAtCUd6LfpcsRsnQ==","shasum":"69684a42047356dca4d93a343a18aa85ff113f93","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111011823.0.tgz","fileCount":28,"unpackedSize":3092336,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcj0TQK+TZaTquNFV0zcDHwCrdtRfGyddogWLygybLbAIhALRc+HfTng4jVtv3DetlcX41z+bhx0jUnzkzHV6QYVrg"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111011823.0_1635852320158_0.8028139157416421"},"_hasShrinkwrap":false},"1.2110152252.3":{"name":"@bentoproject/stream-gallery","version":"1.2110152252.3","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis. To implement a more customized UX, see\nbento-base-carousel.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2110152252.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Z6ZA69bizXXmg3OZBNTj/aE/VpMhYJ3YyvlwhlY6ZT731PED79Xk9GDKQEFtp0dtIkrCPGZ2uglwtDtqCuQQkA==","shasum":"91a9750e07be2c7f2e4e0a758bf7465c872a7361","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2110152252.3.tgz","fileCount":28,"unpackedSize":3092336,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5A4n90drEti8G0hLSeRjuqdgM49yMwivk9BnqfIf4lAiBhMSU1TibgnIKu2xQYMiW95Yj/hKJV6Gpb6lwo3jsqZg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2110152252.3_1635890758619_0.1606670436242612"},"_hasShrinkwrap":false},"1.2110212130.2":{"name":"@bentoproject/stream-gallery","version":"1.2110212130.2","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis. To implement a more customized UX, see\nbento-base-carousel.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2110212130.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-GJHarDYJw1VZOhWVnEpWKBwpIIz6im6Adw+KoTcRKu9cFpGGpjDzMtPynXWwuoHX9uiDprrwx1ygqCgorw9f7g==","shasum":"adbd8c39d248e357e6daef9bb746dd591c51f75f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2110212130.2.tgz","fileCount":28,"unpackedSize":3092336,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVRcgyL6zdKlB/NrNSUG1MXDIzPwzDPOwS7wq2En4PSAiBd+WtI32aqbGWa5OyFkH85pNzcBoItGyLoFsqQyEKVcA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2110212130.2_1635891329595_0.11160853535560578"},"_hasShrinkwrap":false},"1.2111022043.0":{"name":"@bentoproject/stream-gallery","version":"1.2111022043.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis. To implement a more customized UX, see\nbento-base-carousel.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\n## Usage\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis. To implement a more customized UX, see\n[`bento-base-carousel`](../../amp-base-carousel/1.0/README.md).\n\nUse Bento Stream Gallery as a web component ([``](#web-component)), or a Preact/React functional component ([``](#preactreact-component)).\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n#### Example: Include via `\n \n \n\n\n \n \n \n \n \n \n \n \n \n \n\n```\n\n#### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n##### Actions\n\n**next()**\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n**slideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\nThe new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### Attributes\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n\n#### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery\nfreely.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n##### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n**next()**\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n**prev()**\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n**goToSlide(index: number)**\n\nMoves the carousel to the slide specified by the `index` argument.\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n##### Events\n\n**onSlideChange**\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n#### Props\n\n##### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n##### Behavior\n\n###### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n###### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n###### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow\nthe user to move from the first item back to the last item and visa versa. There\nmust be at least three slides present for looping to occur.\n\n###### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n###### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n##### Gallery slide visibility\n\n###### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s)\nvisible.\n\n###### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n###### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n###### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### Slide snapping\n\n###### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the\nleft edge, when horizontal aligning) is aligned with the start of a carousel.\nWhen center aligning, the center of a slide is aligned with the center of a\ncarousel.\n\n###### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the\ncarousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"f4d548031e8e20aaea8ade649d3394d56518b769","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111022043.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-wmxwBtYu5D8Rh4wcw1bSkz1Ez8WmfVzTtatEoO3tuHq/cHxjp60ygEgXTOSdMdE7HlWlmFkM7X9QDkIcn8eqcQ==","shasum":"b393292245010b71eaed23e89ba143afd9ad91da","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111022043.0.tgz","fileCount":28,"unpackedSize":3092336,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGXI6Kw5jpQKbK/njrMmYSeQR26xcrABeomPYWmw8GkyAiB9qmT3Z8KI3LCSPFRZEITjfbVD4TtpJdTeJPqeEPwkhw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111022043.0_1635938680317_0.542508568723483"},"_hasShrinkwrap":false},"1.2111180040.0":{"name":"@bentoproject/stream-gallery","version":"1.2111180040.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Example: Include via `\n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111180040.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-3qDl/EGoSdYexDCo2wSi+BPFlrVO0Nzy4n4lu7dutM9KWfoyHGUkIkzljjMJG2wQ0M3i8EYkA4nWFV4xL8uJMQ==","shasum":"b4c0b4588d0f2646d070ef22c01d9903c3e2fd8a","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111180040.0.tgz","fileCount":28,"unpackedSize":2929114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsX+CRA9TVsSAnZWagAAKCYP/RDgZgUY+vU+l7Z6ym/3\nJipkf1UKpHC61AwwwpA1zO3Mb2V1XRcd7ewpCFN+1cV4+9lVlEYwtppx+wGY\nLQqbDhUBMtU4zYdgq9SM0kYeQVqvFplu2KPeUQtjOdvVLRVyF0jG1opVYsuX\nb3Ip8Tl9qs5Q1u9F9TnBSn3ra3TpXGH+tbAWcaaT5gcXMMOun6fLytQ/Lvwe\nMjqVZ2JVJhRJRZUAFicTDxtGXABm1oMQUu1k8NJssy6vsVbQEspw4A3lKkQg\nMCdAE30eYYKN3MT8coORL4vEQll1vuSLkPk2bPxfgjSkFIzYfZvJ6Go3Hp0I\njdZatr8VhClR7JH1NC9E2EEpNQxx8skYopLyWznsfRI/iluxWlwppoVP55BO\nUd3/ASPwBtq+L8J64e2FTss1g50OKjy5c5GCMQKYHnODZt9XT7NYAS1UzwC7\n2prHfeNNgm690V6ADPV0PcGFdbAM84vbEw6A5nceligY6QO0J3kiEh45mt0d\nzLfkkp7yjpleqplfpp9NuUZ9NcEIZYrpP1rSIzD67W7L+aE2MzmVclQLhWqF\njz6ki3lqaWNQvQN0D5cifXCT/UBkJqF1seZjqiIf+B3vDRkgDW9Z0vXX67ED\ngKEooftwXjc2+yS7zmlWAUycA4tsBQYxMDXn3gWRtMz6eNy0sQwSWM2QfK57\naP/g\r\n=daQR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnZ1e2/rgUHSQjvZiD/wlkcV1bjhzPDcrVNKu1bSgngwIhAOYSbMxURjinndZys6jJH5cfapJQw+5nzlwKcngrO+z+"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111180040.0_1637271038452_0.11198153471408268"},"_hasShrinkwrap":false},"1.2111060251.3":{"name":"@bentoproject/stream-gallery","version":"1.2111060251.3","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111060251.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-VG+8S8JX3uCt8Ds3a0fseR13vee4ZMJ4Y8thZWZpl4eX+2y+hpgF6tI2b0oZap/SXyNsrxDLxzendwJcSCEvOg==","shasum":"5f1197fba03ac8e93b0da5c7a3d49d1e17a9f47d","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111060251.3.tgz","fileCount":28,"unpackedSize":2929114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsmVCRA9TVsSAnZWagAAb/wP/jaOLGAwefdxz9a4BN9C\nd+DHMfp8BxtIspbYVyh513wFFYVEOYFkVeInsPuttBD+7FdMSifJglrO9Irl\ny1uqxGfzyZw9eQwltOh7HxTn0UY/a7L5KJCl2Ltm/ZihZSrcrGZ94B+WVIes\n+p75RpbJhafetA28t5Q7ilZou5qmxxgYCDu6P0zJfMl9bOf//Yx8RoWZL+EI\nvgdt9VmqWj6F90nIenHuCodPMdrU8+cPIhkwGH5fFeBz1ETcSM0+4hbO2Xzl\nGqxeQf4fU5hXFDdOOn3lpGhl1P6vVDdjuKRjoCZceSC6mpzCAEfI8Ytifttc\n67vsWnukY1Q7P5Ysu9TJgip9mTzdKervdkd0RozyyZIiQxP4GY/79xBuaEHR\nvhD4H12gxrU82OCqTK5dS/+kOs9ayd6uKxXY9JU5LlI1BGR+IvbN3TFBPjuq\ndFoeWw9Nhamp0cdQA8ZtW/7QqggtrFSIXoZqYMFhGA1Big4ksCk6qZfes8qw\nYPOIN8T20lH63bn630ltKpFCHr6LOi4NCp9dDS2NDluef32OcLWODrzhd5wN\nKP+NGVKZUqwopEe44MCmOlJQ/hwCcNt88MhAug+fVltb8iEzjxzkza7gl6Oj\n+lI2HTBidaANOrgVkLjvUC1waQn05vD6HwP3W5gzMDSKWYtWomtdxfv54qFR\nIqCv\r\n=DDJl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7X0w41FjVPPqtlNdHXrSSe022tI+kY3ippmylBtLoUgIhAJ5LARthHSOlOdyclZMyYouZ+B0RWrDs0eFJYRwaMi+o"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111060251.3_1637271957590_0.5902152849455669"},"_hasShrinkwrap":false},"1.2111182332.0":{"name":"@bentoproject/stream-gallery","version":"1.2111182332.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"34ebd943d9b16506b7a515b38941fdd8357bd288","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111182332.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-xtpRl+il7GWtHldZTIA+ddZzJYfZvd9czi1ssnfiTfEdJX2OPF4iASeNuNLa5oTllXcGeAPMTFkg3aKiS5bEKA==","shasum":"baedce2f50f9f2dc28d5117d5d3d285498cb49c8","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111182332.0.tgz","fileCount":28,"unpackedSize":2943500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl5fuCRA9TVsSAnZWagAA2GwP/RlyNNCHAh3U6+mU/RKW\n1C/4OP8Yk8JsJcm3FrFNFNVkmXBwp/Vi1ls6BKOgMNkMgsh/X0aoiBzRuNn/\n10tRuz33AgbG5ZTBqLwl0OCcZ1CQ2KlHXzBZcj080tYOxVd2dCp0KX80TX7g\nw09LA03CocvMipzkYYtGgSmWpeG2/WMdSiN7JKQ6w4bxdAXt+KYmgPEKMAUK\nieUhhcJaKiS1sFrfpUq/HxjBMWkrddyhXgHZsmljyzut1BMfPW379nsZw2RN\nPZ2PFNqJJkQAon+89+/YQGIOx3tBJbBUc2Et0exFc9xzMwYRMCnzJ1QBULPH\n+byP6OiDl9pGZtbFAMW9ixsUr4Uv/6D90DYNJXyQFVwvALVReOQd5V1qIubS\n7mlhy651rmy1A56zXmYN8mbyoNUOxYzw0zaLLnFeP+vNze8R8PEsmTsDl8cq\neyIUJuOQA8Hj1vYIozeUDeE7qCHEH3LAUNy1axEbN00iGw6uvh+K+k1TBxxM\nSl4XMhI+LlMpg9UTaOywRx6sni+Fp6wtiV5U6sp/dhbx2zXpPkj3KU2/i8Mm\nId8W7xANqLBHlUqOyAQkzEibUFoetXTSN8fH+hMfhFRx/O0wgLtUsB0GwQ0W\nF89wYuMnP5a9iRNDJNHqGe6kwzlzFMzs22k7h+DVFgZ66+XJXujUN7ryW2vH\ngDK5\r\n=Wm+f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAw8bMptXgD9M/R5Aa4eJs0rXBPJHDRzYE00lkJgkt7QIhAIvQ3L2n0nuPMbsIiO/nYPfwdmr5b+FrvETRdH2fARvs"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111182332.0_1637324782157_0.9543502303722264"},"_hasShrinkwrap":false},"1.2111060251.9":{"name":"@bentoproject/stream-gallery","version":"1.2111060251.9","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"04e44a3695f8db307eda69f753e10665cfa70fa1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111060251.9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-LwIpJzlRBpjGRi+uSX6vosX3oLzFtXOOUXvuKJ/sjjEuQ2pzocazbcfuXy1TdlbnxM6r3VcVltrvDSHclqELPQ==","shasum":"91c32d47f504477f603bd4990054a0342ffa7fac","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111060251.9.tgz","fileCount":28,"unpackedSize":2943500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl9F5CRA9TVsSAnZWagAAq9oQAIOF8SpEAMZiOpbpjgYB\nlxnZCoZ4edK0pS4Eq7/nm0Br+VaIvQYkEFUE8GHSEfb/D0qABtJ5U+FmL3bF\nw29hcIcU9WYa3TrbWhl9R/MP+3+PMrVF2o2rVem/vNFBA5+f9qVWv3SQr5gX\nJHh0jVdkYTegBzCxDFd2ZNYysBIQUvmGoX3xIypeLRBxynmN+oOVl34Vf956\nhonUVkvJa1AcyL+0Ouci1LElk6kVTWiD9V6kPi+SfAdeHMXx5KTBnqe9aZWM\nKmAJf7KD4e7QNOcJCk8USYlcaPpDDciY9Vf81CoCFqh5epNe89rvFtO4Yaqd\nbfwCdZpScY3ij460Ldtzeh9BG5Q+BS/ZHQVfMeBbccgo0NSGewFYeMyq7gjG\nFgsqNR539saCN7uasx04QULMlHGvv521iCf+p/hI1JiNDnyXynwHJbHACQKE\nlmyJJB0zn4MiGFuLkFyyCL0aiDkIoztCX10nQh1vtHeuV89esrUlak+BhQBK\ntFww3TDSVwZa0CLHH9RNWyGzhT7PnD2TK50cBLBi/pCV/KAK0egzfieve70R\nJnwRU7z1LmMb+E0Zpsf+bdSC/rDzhpKKEo4k2lYS9s/TmLCB0BYVNmnTxyoV\nAwlMt22PTrYXEMAEL8/y3CWQlTlx/GdhGBwKoiCj5ug2eBgXZhm7j8MNqs+Q\n4o7G\r\n=dMr8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQLgTHZMbHIzAMdCaZ+KZ2dp3MCvTDaO6Zqw0uF8e1cAiEAlUYrhAMces2+x/Io+8Tk4DqeB3TrD0lVpPmSg8sSXFk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111060251.9_1637339513676_0.7354802494273356"},"_hasShrinkwrap":false},"1.2111191951.0":{"name":"@bentoproject/stream-gallery","version":"1.2111191951.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"22d6da19b9e01e75e6b67f54cd425c465822fe8c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111191951.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Egm4jaV4BYw4CzVRvp522QGMTJaygJtAOadSuSP0C97weQACwuCXWzHETDMyeg6IlmymL3kdCtnWAccww7PD4Q==","shasum":"d81ff2b4566904e2b475051c66831a932300f71f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111191951.0.tgz","fileCount":28,"unpackedSize":2943500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmOjCCRA9TVsSAnZWagAAf0MP/1mlBXy5YYBo/oDcoTGo\nDEN1ijQBKv7XTIazxN84Wr5zZ85tu7Trzr4C0+j2Fzdz9U0JERaJkhXTjoNB\nZNN1reloDGkPddyZWTIa//i2R5fP0dM/7RI+9Ld4PuxpMCWU/wlvVTTFfFdo\n8UHZJMOKTrVG3gs3AlT7MwAfQgq269c81lfaP4aZP0ZEXe504n4ubj0hK7H5\nkIc35Z6iBp6WVnAbnGMevCqrD8Lavath+m20E72ySSlhYlo/ZtYfoXfhl+rl\n2f7NmunfxvhwOW1cJP0H1jFhUTibrQyGp9YFiNws2cmHJbhb392SReHrx8gT\n1MAPOOE5Q0OywIEeyQZV/QbE2Gri1gthU/92l5CTt3kPs/cXCDFUgAQuqtrY\npqHIkCw1sbjA+VTt/xowmh0r+1JwYOGHr6hZ2W9zU1+IOInbC92yBegouCIq\n1B93WxtFbflq/X0IpD7BkedARlc7JCvv9vvJewimnanSZjToPXdbOfaHkE/g\ngnFJZT2Mipx+OzD26bRW0B/3hUBjuiCkWQGhUe8DFngwqBpnpwzwrzErjXr0\nBjoRzdAS7YE4B1bQIqkltuAA5x55LgbezWj9mk0yIS/J3LQ3BxNCb0ACSKBn\n5tRMQ5ZGiH+zffScKnzACXlspWVfpxUcwGEA1z2vBfBvPgaOsFUbJHZPy3Xy\nRZS+\r\n=l05E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBZFBzVyBHQ3g1i3LpXBQAccgxY51eAEPAnRrQrtYmAAiEA56yPIEgRB5JcRcv83HDUWjzXPPFDZDEyC4An5RzrCSM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111191951.0_1637411010837_0.9482284587705541"},"_hasShrinkwrap":false},"1.2111230244.0":{"name":"@bentoproject/stream-gallery","version":"1.2111230244.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"d906c0bae3e05aebd88696b9659414f63c1ca45a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111230244.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-0ur2hUXYyhcXv0xunGR0Yk4IUR4TTw4H6tzrmwkW+YEZe5MLCWLRglevk85yiEKEgFPw8rHDjowMG4fkrGIkHg==","shasum":"a7c529258b89cc9229d678757d7f8840df978511","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111230244.0.tgz","fileCount":28,"unpackedSize":2943500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnN1rCRA9TVsSAnZWagAAszwQAImQyCRqB60J2SDg0S2v\n3ei8+9qUYNuapel30QuDstAjdGqwzQhm+Oo85jvRqRfw+2nrEXaeiYHvJVJV\n8iVkeHQfWAhm6yLAJX8c3GNRs2nigfQj1hgPhPk/yGD+KqHgGWz5xf/O1HuR\nf3VYd7P2aScoVc+OPXmZH1LJMOL6+LLAVJE2M3ZY4HFv3dy88T/nY0/gD9uL\nD7re9R+KNZVPDEGYJH74+95Lv8eiUTsz8bxQ2x8/l0aDpx55nP5poabDK3xM\nkE6lA8/eKUUXk0e9bscJjVJlbKKSNZi9hWMq64d7+ya8oGMpf8NE3I7a0oNI\nm3S3cvHFDSevsjhLV1cYN00ytoG32jX7seqIQ0tsUDp27N0d8Z1RLZ3YHev/\nnaQsmQ3zEZZAarAK2zVxC/NOSYOGp41mX4iwu6ooNRMsRIB4WT/Tw2jKbYdG\n6ieP/kBXaUklqdpRrW3WMPiCBIMVlm4Y3MR3vraxty9g4aIfEza0ZuBqcK67\nRMbn21jwjga+hwSfHb3PPIwfJLMyglRE02UHl/xPfmhqCbI0gXi3K3o4z4T1\ngqGRehsnce8byRIVPgflcMJ/515FlwqDW5zAWov2KBt96tOLMchsqMKhkMJr\nRh8aBS/5j17iI7bKXC9a1vw7IbC1pxAq0dCDhBH5KfgBs28r31fr6QPjSsfZ\nGrir\r\n=VwQC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDg5HY5j7yGGv0Tdpi4WTtN9Fwn7DxSng9j4yqf9SVQRQIgEH6YIDVto5njd3gMivlgQJgT3O8Q5BbHOJZlF7Us9DY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111230244.0_1637670251318_0.43793651007996726"},"_hasShrinkwrap":false},"1.2111230636.0":{"name":"@bentoproject/stream-gallery","version":"1.2111230636.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Interactivity and API usage\n\nBento enabled components in standalone use are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"46e8f482bf5e3008ef07e950034d194c48317990","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111230636.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-QP3HJsAGQCVphFmmI35GF1HUQKFwWPu3Nl1WNJeJZWimVvIIuOKSMMfSP8iT/0sAI9UC2RjViynAILqM+0+jsg==","shasum":"d3a69fbbcabe1303cd96385980325b87d02004ea","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111230636.0.tgz","fileCount":28,"unpackedSize":2943500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhni7PCRA9TVsSAnZWagAAjIsQAJPx1mnBrg7gINppTOqY\nCwOZQZPQZdIes4sExcTCkO/N4V2gHHqlV07MoVboXRH+C4Ap08xYxT2l2zyM\nsMFH6pDyfjCuPLVnZOb0i8H+uaMfMUJJZ3grFSiIgv9174DtJCOc005/3czK\nofQFkjGGvOU1yicheAALb5WqQUUEU3O/01ZThPHgheRZmzNdpCvRWkvF4Tva\n6bXZ4hD27C4Zf01/0OBLOJkL/dRiGm4VZAtTF6iUOTJS49KYewS8rb3SBabe\nQEl+WKPmnD/bfQBx3UION/VRDcZ/mitOLD0IrUlBFNIQaHi8Dfmqo1nEXTwi\nGvATJ5R4yvHVQ2v8vPaLlfo+40TFbAv9nsiEi0VJvRU7FdByfnJKn91e5XoW\nr9Orpidl+5Ee51mO3+M1GZ41Plhz+8+tPXUg4/sdcPWmJ+Gne2o+Yd4ckL8P\nIMgxktDEea75Zn7xBe6e51aHBTELGOdbCOMC475LjbRrZeRtK0/JkXvnpluc\nNm3LkNubgywdl7CrTGZrRV/Y+yjgygMsQaaLlNfObZVwHG27OvVXLfixI107\nandwgXblWaKHbF5UW9MrRCmtxhmu5V13PCVn34oHai0EM5VOmuSovm0w/SFu\noU1Typ/qH68vmeeX91aUv5X9FTJryO6UtCw1smE9ynuFHbsnIvPWiOD8B9r4\nvz7Q\r\n=oazn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7wRkWSWWZXU5hb5VLQ5O1UZXGbtakI6o9krTANIVtYgIgDL5LZ+NsWrH+jcwqPSY7DRIQX4prQnx3iv4gg+T50ys="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111230636.0_1637756623326_0.7269525617841641"},"_hasShrinkwrap":false},"1.2111242025.0":{"name":"@bentoproject/stream-gallery","version":"1.2111242025.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"b78e8781ff3976b3bff1ba881cf66dd2609b5c07","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111242025.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-wqOpUxtkNHB+kvgIsMwhoDa8PmsbxASTuKbl9z+WfONwka5XvjdnqJyu7ohadsm6V5VXc5Y1pOWHQF1vkY2zgQ==","shasum":"e343b46efcd895035b2072451662117e01fab627","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111242025.0.tgz","fileCount":28,"unpackedSize":2944848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4SwCRA9TVsSAnZWagAACf4QAIbxwyEaSR3q4VbD9xsu\nHQbWjWAKGTpd+1ZiOBdJz4+K2bTIf+SfDS3Blyj9gKqsFj606v6UPrvetk1w\nELMuS5oL38qb+LSmSkZ3ASdSICYboQ61IaKUBNl0YgvsMinNopVyeAn0l8Kl\n8A4JMf1Ju4cqSXfzV/Eo9gdIujUd1jokmIl+uedBtvemjcVnI57RacBVVFWO\nTvhkDBaHujHAGFm4WTW1rmCKmx0IbNsim6R66DM8BsRHgetgRYmUOt7Vwzfa\nEUAD+/mjrmi8NWPXk8SyS4NLaR3inz/tqndVRJne8Okc/vd/qSIVD5wl9H7V\nT3MmqmPxUFSec+nADeLsv1pWLCmkK2SMPC8Rjm+jO4EVZRzjpC0Jms24JG7+\n5kooIri9c0f8XvqWAy22kL583N4nE5M9nE4hrNu7/wmd7shYhHqPNbVLgM2l\nhqnRkNOURySro7BFnf9hKTCrVZ0cpgLgRj3Hb2fAjWz/1qefIAmrksafEtHE\nSpu4IZSRgFHQiSVSooqRQU7kE9jyzkFR8ujkhM6xgKH0vLJY8iFnm0TsPguj\nAkf/OCbMGRcCv+UowoKXgsvMq1Qt2Zb2Rcru82yiKvz5J4y3E8ao1Hg0FiVo\n6LOqmePmGYRk57W72tYWl2LlTM3VvcnxugS5UwMnXGySu4VHqWs9ZYCYkas0\naWEZ\r\n=2eM1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQcJ24axDXpIZhJzCvObmTH4/iJIexNNHRSFiV1fPz8gIhAI/nZBh+mCQmr9Aafg3+j/cpl62ErzDwV3OzI46uyvWM"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111242025.0_1637844144376_0.8290620487899494"},"_hasShrinkwrap":false},"1.2111292120.0":{"name":"@bentoproject/stream-gallery","version":"1.2111292120.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"e938f7c9446e2d1eb0f0f865c0f1ff42a4be76c5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111292120.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-gwDK4Zal9889EkJ6uabFsfogmpH/r/Yz9wzUEMqdsaSqbvj3JfFbbn5teyJypdLe94SRBIgtKbH5T4aH2Bn5Eg==","shasum":"6a7becd77c519526479a0e10289f577e1a85453b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111292120.0.tgz","fileCount":28,"unpackedSize":2944848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhphvgCRA9TVsSAnZWagAA0bYP/AsHxansUxFZA+Kc3OSf\n/LE10q+8HO6oSrweL4FURQDhnAjLDojz8S+b9t5MKPZNkKNIujyph48S09DA\nTAjkB3+6nmGBut+CixgPTviemqMJg2Z8WHW4Ww4H0aP+v5eY1D0mGy16sUpl\nd6xvsIEOetoL/l7B3px2wGkXUEDdyHHOIAmXewZ75rHMUjx1HH8PZSHRss8h\nQMdUEntjrqUyX4wk8rus5ppvVJc5hqyTiVRH3Mr+xNWaqH0Lg7GA4WEVZ629\nbq06lLEPBWKvnMmEqniCpEF4okdp7CLF3cEmzKQbSUMm3C7gMCVVW/OeMFdo\nHE7XbTK/qgKIjGKR3EbwyJVClQEUTlD/hhQz0zj/751Q9y96ZmXUMtKebayO\nUApxiBVvj8WEzJXOJR9LzqpyCm39t/xoFlJLlze8zDYZQ1m/zn3vBX3hNIvq\nqxtXSHAZOJQjTAh9zcRN/nAe84GlAwxwpU/kES5XviXJ2IXCHOSWXHBzv/J7\n5W2PKDN2OrmCHlyk0rZcG/wEIG2nezctFgFg6uKnLd2zixY+QSXR0tj9vsQx\nLpCJjNrM11pv9A9uCNx7qXat9ofASZN/jdwNhdvO6kavz8W50WuHEE47xWip\nA9nu3edOhpPBp14toBGosyoXPnwK70NqNXD4GhMzFwxJdTF77iDJU6rHNgfI\nFRrs\r\n=J8qs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh0eMSoh63RouLRjAvt5sqQb16fyRmD74IAfZYbvQMRQIgKFVnMLwSX8UzSFwulyT6PO5qKpL9LtaCye0ju6jfJjk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111292120.0_1638276063845_0.774979705701683"},"_hasShrinkwrap":false},"1.2111152338.2":{"name":"@bentoproject/stream-gallery","version":"1.2111152338.2","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"27e204ed206cf75fae0a37d8f110b5fedb45fa7e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111152338.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-yGYaStImAl/5/7FppCB/Ho3/VNkRQMpFc84p5wH2Xw/cR8wh7cfTzaWMdhe8+L4A6kn7DESWc3f6LnA3ZCdbWQ==","shasum":"794c12e3dee9ae8462304c0841d884fbccb09c6e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111152338.2.tgz","fileCount":28,"unpackedSize":2944848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpmYhCRA9TVsSAnZWagAA5IcP/1Hq3geO4MkU1P1MyFGL\naAvoRMnrNfp56A1OsVl9nLMy2d0Xq5yGr7XVKvPo5mgNUfEbVJPulgwi1AoX\nj+GxCUDS+OJ+VeZ9+2c8CaMIpmIZf9onvuCswD9YpqQRyo57pTD/2t/4lfig\niTVEuj4ScwV6no1QsCEcYJrpHH2QpCBDZXJ+lWb4cUGbd55bmMeSxIVehszT\nmTxAJBkiD7HPAg8LVR2DJWgdoJ2hQqABRA4SR+fr1XIh604v2Tp+C27Mj1rK\nVDqqCoNO0dvWwpBR7ou/WZvQmcK1qU1CoBU4nIhK1BHM16cgJeKbP8AmnoNE\nETab+LLlu4cCPYkeThrurJCtSesSCqhdYJX9uFLSUGm/k8/bkwgM1oj85hHn\nwM9C7jgYKrpnbKNTSlda3zN5kYwT2rWIX2Yd7VWsNgei7u5nRf+FFQQuxZgd\nfKNoNHLVC5+FWWDILA3TklV3+FeVePbEw3qCqnIisOtOdQaVU0zd58rNlTWC\nuemz//Ecanm9CUaoy3jMvL6G0jLq9EpSRuEqsJ3poOsx9GErq7p9sLQTYP5N\nEWTukv/T0PaRYciCw6XG/OUmqpmQleG8qzisXMVbPzYx/hA9gMd5Yk57p2Qp\nBMevRNYdHj5xbD6gzVLt5uijYwb+EZjK9TxIsSltWpa5JTNWl+b7rBxmgpZr\nVH/k\r\n=Fb0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDW8VwJYMhSFhvOofC0XYAKUbx6bKfQzVzzAx46cOnfNAIgLfLJBSMmsFvpeHeAM4UT603DbaUkh6KKbisOcjQWkL4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111152338.2_1638295073195_0.9784606995840037"},"_hasShrinkwrap":false},"1.2112010058.0":{"name":"@bentoproject/stream-gallery","version":"1.2112010058.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"6d1060a3a4288fb99047cc700661d589bc9e2a01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112010058.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-UyvWCZMm6yN9WyVOt9DuVe9g+7+0EONfy8FT9fea/ZHx91x4rirOTgfa9v+XiEvIPe+5liwOxD7Frv3xK89uag==","shasum":"be5add4cbe5c853db8d7639099a420719d91b0d9","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112010058.0.tgz","fileCount":28,"unpackedSize":2945120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2g4CRA9TVsSAnZWagAA+p4P/3nBhiq18L3m//pl1ReN\nTHuzRXYSqsTARA3nZzcoIdoLMNN/TbnlMy7HYlSvoam7RzIkFMRkP/bOlQgc\nnzmxGA95bWgYrquXh8S7CA10Tsy0Ez5Xx2xLy0W0mf+YQwVzPAS704E/hta2\nrb7FSvzpkTfR7foiT5lEyxJqVKV1dtH0KrWrMq1QsTYaus6nuaIf4hrissjF\nu/geZe5NP0Y+hozNE7SoaydY2e+jWHVmHf6ULLZKUdULvCMdaQ/zoZyDEFUU\nBaiSYUEjmQr+zQe57qzMHD/bZ2p9+kOAfRQuMRnq17+a6/OyzLfzbgCgXAmR\nMH0gfpBPnEPzCmmTgTrgGU/hMvgEtBUCTQxMseM3InUEDXOnYEGX41UrMdLM\nU6dG60v/fGXLgub9o3VY+ZamhtAeLZoJP2Ge7GdllLpeoodEIROLq/PIB5le\nJwudeVIyUiSW27a3xL0Pwb07O1HK9rSS+0iPxNJ/HnrzFzjdpTZ1aBWTtlUo\nMycIEK2wYERwYt67ep5Oa2XMe1yIMkjhyGdQ5Lxpm9rXWq111fAhKnqXhjrt\nU3qc+Du/1mu7rPi5rXhWuBrhTkYDtZQsp27XEHUOcrffQWuYropYi0kA1bmd\ntL6JNpYsg8yWE0w7SYKjuxX6VPjCBTlp8qsBgSgkAsrPLFKWw9ZRsI/zB/Ef\n/ZZJ\r\n=w++0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHuUhtKpyrwVdEPk1WjjPnEdDvO7z4ulXWptiDqHO7iGAiBOAXhbhgiuHBC6Wx2JUULbVxK8TcpqKQCksoUvmEFU8Q=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112010058.0_1638361144022_0.3514539449714831"},"_hasShrinkwrap":false},"1.2112012300.0":{"name":"@bentoproject/stream-gallery","version":"1.2112012300.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"4ecf84d856583465c1ab59847234535fed16d55a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112012300.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-I+WFEiS8J5/XZN/qBZ5TAG87tlSxRwZyjsZBTv08NSC/lJtQ6OKImzHx9sF82bmYosZ6eQO+u4slmRMYvXH7Eg==","shasum":"ad6e8bf9a7543696ef6e9296107eb14029fa4c5d","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112012300.0.tgz","fileCount":28,"unpackedSize":2945120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqLxiCRA9TVsSAnZWagAA6FoP/j5XOBGneF4PT+z3Tdrg\n/w1p0vinC9SjgPrl8MERSn6huCAiuAEaq5vbD6TVpdH1K+bvQCMULakY9lXF\nQ5KAnhRkNdmOlMHfQeOU7WKGgvkCXI3cqehi/WWi8x4lOYYgH/95MBRKgArd\nCPg9XSOnaO0YjhSYZitrnauKlyRNM2yR8Jx0K0ooLqmnXNFeRPsHO4LzzVA0\nH7de113tdt8gTRYgoPe+6LF0ot2kWBAYyN5l373Ebg8LUzFwiUvVfxR+DEyn\nqLTcY2WuUys+Bj0JJyCIztpC4UiVHUi/My5Psw5UjZ60xP4KtxaF1+Hcs8Ih\nRW8a8Eiplk0BfpCZ5OTHSJKHzXGewqzRaoCLhigraJpAY+w63D2DBFZF5CCu\n/2mk3UY8IiLM/mY2CqmOW4g4PV5iTvjs1nhFEydlpl+wjT6FCr8mz+onm/Sg\nuxVxfOnFfJqCs0lXOKNrMQ+uNYUrRjNZu50vyapOGQLt4UqkjQJfzpiEqUr4\nH/g2JQjM1HdcE2gOFb+45LijGrFqY8EoxohbmW9ZOpGdFS9jmO2jf6upIXYw\ncXZoQ6A0N6O9aKGhKy3Gigd8CyzCWAxIhEfqzTTrfx0sVj0hwFc1AyZuDDbP\nyxndfNspLHNaYI8DTNWGvW4w2X9sTjwRrIfoo6K6GOS0L9evtAY6vaa+SvIP\n2TpZ\r\n=Jhyz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgLhRbclW4HDz481gW0rIOTLwmqbqppjwfZrRlPUstlAiEAnmqweIkUlM8EvN4MiZ4i+mfSeB3v9fNsGFuFVR6vD7o="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112012300.0_1638448226788_0.8183620079240981"},"_hasShrinkwrap":false},"1.2112021656.0":{"name":"@bentoproject/stream-gallery","version":"1.2112021656.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"4a66d3f7120b51959ea01867aa68d516d5e0dc36","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112021656.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-+wRc5lGk+NjGf/rCVZn3JDPcS2Lv6g1sRV8Vuow/j0wEx54cDjV2l9wtgBWnZ+qkpeTx8sA3HwU3yJNLnJeYmw==","shasum":"4c33ebe58db315e576fa515a3b7bad48b57002ba","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112021656.0.tgz","fileCount":28,"unpackedSize":2945120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqgv8CRA9TVsSAnZWagAAiP8P/jEEXyLXY1Um7e279Phc\n7237757QqzC3nD0bLh7MdojxDqWE1o4sCS5763H7rLpFy/apMmAHZHNY9YAl\njoR3HlnSrkL5BCTtzSoLp8L+SY7NnEbLVTDCigR0hUayoqo18HVJHbWmT3nj\n+ydUpa3632dKSQcsV0z0Pd6oYs02yoW0zMXOT3BwH7HmgePNBVv2sm19wA1/\nF37zcjuC3I3PpkTNKZZqQlbEIubXVfcWM7wPG6OxCwVAiDWCqh8LxK1ZjLQK\nXCBUI7dwElfzrwD+I6cLzXDfmVHSaqHiTqERNhoshBmabN8fvBWdmA80k09Z\n4VPwv0JUEVTwNgtlEB1otcUl7aZlNdgzuEuYGn4gqqUh8Ue+fhdj/zhwsJdy\nKtcG3jp+DSDGd+dzWx/LzqYEAtLc6VKlVY7AjFHyrh5cSdhoRfPEpjtDCttg\nIkWWw7D1M6cmpJouOq7eKpCiMhABNlZ6k/psw1b7u4cKabaDQnTw2nqvj5ym\nbesbRCXBB/EPJ2Sspnl5TUS2VqClWR/vxiS8/ac5dP52pAVs/Y/yEqgAxEfX\nI0yL9GtwwF6zN9L60KYGropRA7wIfFJ4PawgRt/FXC1Qqp+X7eOdaly21xUw\nsWGm28Kjq61PrKjTzBODgoeAD7JT17FU/Y8ucICmtErohY4ohfA1b4dmUnXS\nFGEc\r\n=W4U8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlbECpfgbU+uVE7Ht8szrkjZqyiZ84huZOKAYBBwq25AIhAICUFijSvL1exVY9Tyq0RhwIWcfw1GAePM4p+r/SmRo/"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112021656.0_1638534139867_0.1805014787015793"},"_hasShrinkwrap":false},"1.2112032204.0":{"name":"@bentoproject/stream-gallery","version":"1.2112032204.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"80ca53e97f8ac619b78398d429e0031f40cf68c0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112032204.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-v3Z/hnqX+i2LlUJmKVyJ7otI3ikEWfmqjGPcIhXJd12TFMCgKBEPaE4ZYMC7c1WXMfqZ2cOOgraePM24oiklPA==","shasum":"9f7bc5466b96466f8e828a12611bcbfaa283fd97","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112032204.0.tgz","fileCount":28,"unpackedSize":2935485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq11yCRA9TVsSAnZWagAAwlQP/AtUpKgf/rKoHAovXXI8\nIU5xnrUiYUhfD07m3oSmi6aPLiax+lM/iknPDJ649jJQMi5ZSAuNC7llx9m9\nvhQcGmuZohBfnPgags3V/5KP/qWfWJAOpEaJS2x34MnRyfd8NZYg1PfOPCzN\nXxGrx9pAMF70Gn+gOe1Y3VCqU7OPIuxwCOQbcX4EPTKVQjfAG7BTqU0/x7MP\ny+XvQs6EaXAtOSq4VT7WP7Ur6iPMijw97gBTgqymzeqBW3aPnp5KsEfpwyrg\ny0aJmgoD8xybc7JIJB/A4Cdu5E7fF7bhdsP81Z1itHcGO5cuyrhNUbvadabz\nH4tVvF7INJYEp7RiMaLkDRRHEHPv/P5NffS0vrOgn2IZb17bcTFyCVqgpS9v\n+StkSkV3QI0BokyIe/HK5VwnYKWkoNcoXmdoLUJbD8Ytn7gqsT+rV3gwoMAs\nXxhdpIKVpiNeS+AtYk6NSNvRN7iNzsCHkLYASdRYtXGXhVzOJutUG9WWvXpD\nBxLW7u7BlCBfmsYjUC7bME7qZ2etYC+Y7pW2n9xKKulwCxPCmZ1hIEbX3NTY\nNAWXRg78F5+2fseTHrEEz8jHTmwNVCy2dHFC7j3XVO+nADnKZ0FZcUT6Mhxo\nSU9iNxJBLhJiIbHOtwfc1PzOE/KeUCDh3iXG4Oy3Pb3ijoyiFdNGqWWsZsy5\nWhC7\r\n=8gKc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNhTYUwlm1NXO91oPWQc9ir/6YFzIhrLnfFYj7KneZVQIhAP2TLdKYZwSPM40Ad+0tpVCk2yRMiaEKj4MjijrNkEEX"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112032204.0_1638620529810_0.29506207152296393"},"_hasShrinkwrap":false},"1.2112062322.0":{"name":"@bentoproject/stream-gallery","version":"1.2112062322.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"cddcce65024c209c9420ce0567f525aef4fc971f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112062322.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/z3hC4EyPg2vyVvnq+QrjyQTa1Qs5WKKEApGaMRbQ2vfJoTLRPI4CWh8FXk4LgLWi+QPkwKcFkxMHh5/AP2e/A==","shasum":"0ecff96901affa561ea9e3ddaecb49e0fe6561b3","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112062322.0.tgz","fileCount":28,"unpackedSize":2941115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1MoCRA9TVsSAnZWagAAeWkP+wXsc9yfHtN/U6AYYuOg\nCH9lAuHRODWl2xL4djuk3uKPta5LQwbJU8A/aFO2mY3RJLVBCy18ed2IIF3L\nsL4tJmoTYNWHaiWcYU0lVsH2mpZ2RAFYmwHEuoUvTh3wKn+pr91BzylBJQX5\nVVrBxd/YgGGe3lyQNBlImOkkhS0x7zYW4cPrTuIKAXTbrETXW2AGoGegJNlG\n8kks5t2NXyIY8NL83sl4CX2V9XPy9q/UX2EDItArTjEwjlxvnVdNhCIxZQUF\nBQqlByo3wdoVg/t/73xjs3RJWZSO8VBd828E3jWkX2ohX/pdiN3XmfRW3P9E\ndem5EU2z9lYbxCQTVjscXCUfCO2yxLKz9AUfCrgG6m/gOYfmSAjNfU527R5g\n+TH/s+gx3xBdIspcuV+Y+fp/ub7Ybe/ziJPej8KLO1IlLGws12ohZYNxBIq+\nSMGueRAqFVOOQaGvEc76fEiSj+GlJYJ47hUmhXMmFBWNq8N0eWdEF/UbcM3m\nBWHDCJuGEFn5EL80Mj7WwrPiTCYdLcwNZPLJSiX/vV0wp1Ahz/Yi81Hpeb9v\nLZj8kQLC9ncEu3hosrZs+ZDl7HjdpPHOdm4aQ7gCuxLZFPfAPMpXbNLFmLdB\n+a2/+pw4q3n8WTT6BXHWSw+u/dNYDr53zKFTZ4WPFd6LuWFhimpJv3bGeYSU\njeqX\r\n=Qfin\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpdYxn60oXwpHeSbltFk4Ejd4Z501TtU6Y2qL6PK1FUgIgQw/RRPgl7R3HTMO/7Bb8qEq/GNdwzarGzqKaN1nxChE="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112062322.0_1638880040102_0.005938687012423616"},"_hasShrinkwrap":false},"1.2112062322.1":{"name":"@bentoproject/stream-gallery","version":"1.2112062322.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f7475a0b3b8ebdf1b06b5d14e2905a8154e0fb65","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112062322.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-pPXtauMtDlMbaeQukhP5hi/Vas8aVnklC1Sjmgv/tpRNNx7pFWF/IYGhccu+p0twfNfM+FEjv96Hv1AEAzCU0g==","shasum":"b2975504bd0db27ceb53edee56d52b5827af5265","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112062322.1.tgz","fileCount":28,"unpackedSize":2941115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr9RXCRA9TVsSAnZWagAAU+8P/iGTkj7l5BSxuH95E5Tc\n5mrMTYhcmAbS99zf/xHa+DpfXuXcUMBJOKe18tMYs0L9eLKeQPmXevQUk2wp\n9Rk117RNeZEhx7el4OYXn0wttulSY5nGq8thCSz9L4K4zmYoZ1YBo0XcC30G\nDqYRnlFSamHKQ/kXIr3dEq3b+9WQmu94jgi/qfuKsqsUNRuw2apbwGPKp/4R\nO5VkIhiNDAECvxiSR40eEkGX3hPFikbQiGplRX0BlUSavGUs8J76npFFUdGB\nVp9ct+zHcOxAN751zD0OKTb09wOB6XPeJKbgPHK1aFjxDO4Bf+5wHWUWL7Sd\nv5gRElD4hB5FcW2mIybXozJmUcse7lDaU4dnWOJ/Wt87pK9xh3KqnvDmOPJa\nNbhr/O5T+frg49jFMnn/8y+mpBQaI1dzTep+rZiNQXNGPxvGieBYDQe2rniY\nYp/5XWRnMmlogl0Iu+okhH1iVI2ZP4Bgsbqw9L8qPexEX2DqeCzegwdrJ8p7\nvPl8m29IU2kQOE7vVX9mC/7CZd2RRxXBwBMnrzlBatGGyDXJ+n/i0UXdKScE\ncoqbQ51T9Jm7QEkaAZkF9W6nh1a1N3gd9rGOArRPYez+hWSN9DrspHbURd69\n0Lx1/6DV5/25s2p++3BbkHJDptjqkXravEJDzwOCidauxoUjPz1m34am2Ne2\n6AfT\r\n=7kqF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsQvxWlzgjwNtwVHB+oCgCXElLkLGA3DEbX2zWOgmn+QIhAJb4AQlk3VQ120rXnM0ZluTDgK0cvfeayHnAifWa6PQo"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112062322.1_1638913111169_0.4396841016692432"},"_hasShrinkwrap":false},"1.2112062322.2":{"name":"@bentoproject/stream-gallery","version":"1.2112062322.2","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"3e8072d191c8771ac14d19f2122bba93b872265b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112062322.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-TqAGGOSLi1i4rMPv6ppGtU21quamY49+FZjvWD7xGUF5sjxyFk2ZoU3MXzyUrsjH9i/lTc9m41hJunoriAHUvQ==","shasum":"eae7130ad5f53d1e53db8bdc44355b55c636cd92","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112062322.2.tgz","fileCount":28,"unpackedSize":2941115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr+DFCRA9TVsSAnZWagAA7tMP/2KIcLqihpMVvyz9qL/M\nbgIQW2u4if0Wsb3Qvibbak/rJ/TLrMYjkcd8XOc6XoaiQOkj/dObCsqDwk3q\nF2Kt6pWSIuY6IlD1al1L1yAC8AqVmKcrpoj2MbUSSxmpz7JG/bOxfuVA5q2l\nSRtfRfdLb4U5DiPCPVhUnOana9R0BL7rIzpOTeKndDNCuibi+/5QypQYdUPU\nrlAlWWMqr6iMVCg/dk5HcdO2y0eSXKZ8WcyIy3/hlryxsSYdedJcxKWwhGPd\np4jRfO9RpjEk6PTb92XPcl+2iPEM4MtJ4r4qEvzJM3QZptWVuizsQAkFgUFj\n1xsFTNFUYPNm61nV8aPUejjGw8ibMUooUPgj6snCGgFL/OO+5dtNg7DvFR5a\nw9mHiMPO0hhEM1Zaudq6A1/SaVGnQBF7VCyVjD8UYVtBdrxUHnUU18+qqhtd\nkvQgO0WeKwP5TGm80Ii4mBVRihPAS1roCxVcWXTTIulbIL0lsTeLZCGw+djy\nJUiEMO8tKslE+9In6FGR/wo9FBQZyvohVBjcKk3JzLQZpK6lWKePGAhV7LKu\nd2LfgK8GMMpQUNOQILq4wjgIvJp2Pca4Xy5/YgZIw0oLZdJpZdjoPAGrk26U\n+q760BEa/35iRU2OPxrA5dV7an0pMPLt5EXyTe8hVnK/SHhIP5cvDbF8n9et\npq05\r\n=09c7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0FvJGmBBhwsjuYO/mOunZg+hiZwvFeexheMzG0bDTRAiEAjhTSoj0MmgFE9+Yb8k/Xi/Vp3KYeaa9vwnXC3nbM4EA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112062322.2_1638916292760_0.624366802783165"},"_hasShrinkwrap":false},"1.2112080230.0":{"name":"@bentoproject/stream-gallery","version":"1.2112080230.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"6d03180e136b7ae380fb9d5d3d6fd8c0d5b28e04","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112080230.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-qjnSUT4tFIk5ZmGaupPKS+N0O9Q5YTEk/dPptIiyCKz252BEc7oun3Q2KSHVUX6IAa8S9GQUuC3r2U79LM+OrA==","shasum":"ffc948fe274ef2109d09d93008f0181126bd2fca","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112080230.0.tgz","fileCount":28,"unpackedSize":2941115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsLHzCRA9TVsSAnZWagAAttgP/00G0L4FuC3IcZEFFBRW\nScj0s5tFPeQHgeZ/l/S9h30uiBbcUaVLIhSDFMhlQFp12nyTKBcSJekE+6s9\nNw1+gRzWfy2LsemQ9PAckH1bRuDfkmubtEZHkWILfztFnev09PCaYJMR1OgN\ngL2brzAb0v7COLStLeboKFkAPos4Nc6NFTwlApN5idkQVviKG2Fj0Pl+j6cf\nLyJxZJ17IjwkH/WpiVNMTgVVKdqESQe1xkcwMY828dPW184yMT4P/Wok9xxH\nn+aGwcoa+/fOVSEMjGh8JKgdXfC2NrK0/ArGH2Rhr7SViPi/pjHkFOz0Oedh\nc5sWOeMTU0HsYTHhx46dhOxnrpAWQ1OSoCAO6UrePvV043svIspZFa9SoSb/\nl2TVRr9FWh9lVEMu1ttl1FdSkoVPRTk5jpzUbxjW4kKjd9aGDMUyTwmUviZu\n1UzqYXG3Zf0pSmneyN/Kw6nRjBvv3jB9k0qiY/UB5Z2A9eipmgtsyiPmT1pb\nZIJnM8fd0MajzpcLtAu6XpNgLOpEmziVBcpgXHdc/iqJC0bHuwzZrTPlvg2k\n1CllOb+4k3KF6Yr53D5CRnnn6wC1i+jJ3PAZE0ugg29Xv12jd0D0m4C0BWRn\nkyYG2uSbITidKe5c7Csb8J0PwcijtGUiZviYy5Vfa0ngUsUXogIyXd2JNzmC\n6MGp\r\n=wg1Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYnU/R0R7ln6mMeybFZH4PLFmtawm/XhS8yrwgonWZiAiABSv3R8VgetTBUQjCtJEVeU9YaoYQVeVVa6Klx7fnXFw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112080230.0_1638969843012_0.6654222494371589"},"_hasShrinkwrap":false},"1.2112080230.1":{"name":"@bentoproject/stream-gallery","version":"1.2112080230.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6268ef31f81697778937a9d77d4ccda3a561f39f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112080230.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-dVRJk8YIlc6awpxqMxwuewB3KMuXLhSkXQnJXWV/FpRJeJe3X7Ep4K8r9LLJUuDBYoZOqeIyRAUVCVQQcSQNVA==","shasum":"d0b5dbf9f5799e32bdf402276f9846b5b046b40d","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112080230.1.tgz","fileCount":29,"unpackedSize":2941999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNaRCRA9TVsSAnZWagAA1g0P/iv0r1n+eTiAcYHF34+a\njeemgi9Y6GzBY+TAq4Ft17JZn8ECksOb6erlFqXpABfgUWl1EfWkC+rI6Bik\nvYo6AO2omeK7sK0ZrGYhOlFWEt0aSVMn6oTeT5OgKYYC4RX75G0S9/QAGD7w\nd47013dR9/czQC3jpHjuxlqbkfERQPit1rY2P5CjLSi0FkSa+PGQ9ImheTNQ\nJIPs6AVYIoUXfwlAkJtgyG72RXEhjjaQ75ZQnsqCbmr+53U7Ql/01W7RUr6U\nRuk7f/srZSCNT+mNKZX0vj+sjJOQqGZxCRvfVWSa0v1JE4G3q42bGobpfdwc\nkIIt5+tnsThBvNwGRDZwiMHeRdLti3iMiknePXBqCle2myijooYNeqHMdIoj\nwWM2rN1R5Z50Od1iaOVb/UB/lpc/xUc9hUGDYF2NDK2JxI+aFYBUTDrU2gRH\nN1QwXgbECAr6sNaPq18/0duttKy9GN8r6aFB57Rr4iA5/CL9pPfNsUj7icTm\nKvYb1Akq08Vb5SCOYj6xuukaustccrjS/rZipqgukDpgc6eOgUiIN5mrnqA2\nXJ1PZuuexFaVO24DkmbXLPNw2plvLr8vYoTlxivQsp+sqaiWHnCh14cS96VZ\ny4Fk0c828SyjINk9UaXhsE68FIJ0cV0p+0bsafgQjo+B/AbQDx0zHo53r36D\nguiM\r\n=xcfN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr2Ml6ITEneEruEFtCvGkUDY2V+IEexWFmXZj6P2b1TQIgd14HOc8JZr13hxqUtPA5s5txUIIFnfLvo8pmmlw1xx0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112080230.1_1638979217548_0.9143932806405519"},"_hasShrinkwrap":false},"1.2112082232.0":{"name":"@bentoproject/stream-gallery","version":"1.2112082232.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"b7b1a9f9f7f0773645f4fbcb9a550233900046a0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112082232.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ktIYZaozYHb+djA69qsE5JRuGs0ubz/9zChMy0KU2kr/694rX9BS++ZvD0JQf0EGK56NJ+mm5THr7kuebB98xQ==","shasum":"dd13b118e0395a1409d8bdcd452076350b71d010","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112082232.0.tgz","fileCount":29,"unpackedSize":2941999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfpnCRA9TVsSAnZWagAAZ4YP/0iBl13U6xB2tlL7Ytow\nzWubQHk4qMtlT34kWUR5JpHN+/x0nbJIUeAe8oOGFjJHon/HE/dQw+AG5Gwl\nhyUnNZjUBGaaem03TjRDXoxF8IxfV6FAKgTNpMj/pB8EoUQDldpvPvGNeNyo\nw5BvoDdNTgvJTK7iE9MznyyejafMCZO0T6HO5eKGgsleMsv/aYoPjxvi/u4d\n4MzjxprPU/SXDaBCoQhDDA3C9ji/7MJixfZ2G/OfJyO3A2NOiUTM507I55Dv\nKrFxhrDbU4q4nyIbgn1OJ2H8UvFCkpFOvrIWKLbXSugZjxVxy00fIFm8keV3\n4efCZHmlLHDqdARO1uLPTtta5RSjdzEoDXhItyZ/IJEI/bPgpNN7M1PoUZRw\nFPtaO/HD4raQSxhdPIFXnqxoHCbRPMNt6QDNJn4ocKfqUAv5oAP0mT+pi/7f\n4lNYRaGKpXfsRDwgAfr9uXOydH4OBW4ApBnrZvqazlhVbiuMsqi5ACD9+fv/\nenjXQIrBtgnwqc/L9XCzIP9TC28IzpLmK9kJiE37YabGPVuFQ42ouVTS5ARv\nqkc2AFQSoA3HXdFhR49E9wW1ZRTV/6dxHZwToWXr+7SnTeqy1HrNjYb1iwHo\nVwuEdihNmTeDQ8sLQD17izQr0xf0zz3KQDX3PdbRMxcwLZxhSg6Hsa4elIC3\nXMrR\r\n=MUrE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxnfjXuOu4RwdvLjgaFcEU2uhVpscn6IPaUW0VvlwFvAIhAOD17MA8Rh7eXXVBSuH95PGHQ6/4fnppqQb3BE94nOCh"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112082232.0_1639053927122_0.19137857876049913"},"_hasShrinkwrap":false},"1.2111242025.1":{"name":"@bentoproject/stream-gallery","version":"1.2111242025.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2111242025.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-QsupjogUCRFxKbDJvSVdLvRKgEZNJksqp/A0557SQpA4Xxh3FIcPUG1H3oHxNRLHzwz+nO7rPBXJ8ox1q0/y+Q==","shasum":"ea95bc568e0b8f4b77085e76f62fc45cbcf2daeb","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2111242025.1.tgz","fileCount":29,"unpackedSize":2924908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsptqCRA9TVsSAnZWagAA8vkP/2IDNCShmd1mk2S2RCfW\n7+boo4nGia6so7KgP+pvZdsDbVn2aQzq/AX8435HfqIjch+Xtc9aOvPmiWhU\nyVvsopyNgHubxtnvalDzx8ZgrPLYhyC+pZKKzVuN0u3sf4s4R1MKWnT+Wi9Z\n3tQwh80pUaiPd6FeN/lwMDBOU0ivxPJOg0pLKs2rlkjOasekd4xSGVv6bshE\nkRFhr7p/MA/kweWVihl1ld2PywgdpuTOcgyf8lE3ymETq+oHsSuTggtiuaq7\nC9NVyR6SPXvVaN7Knkej/s5YroCPlt+JFLpFOke0GIXfy+upmSN/RgvkbyIk\n0tYwOLenGsqiQfcP0QrNAonuNnjpUnvrMtB5kFfFZ99yawLSJWoZI4J9fobz\nXob3/aw2RpjWjV5BBImjVqrH/AjzaTtXXKJLnJMBZkEAv10IHPY8Y3n3COMh\nFsgWS4KxxLTrdfuJgbLYFTH/oTvdLLXa+x5FPAjr8eklM6/NqASLjsVe3KHo\nvFjMhYsdFHzg0yMXZCPl7H52Hm7Jl8aAl2bqvkCseD0XhGDXcco6yysXLAU5\nmo4c+72rhw0fFl9zpaeFj2JdvBjYpo3r+BfqCBr/JQUh5kr6VEUZPfyTTa32\nZ1ZB3/G3L598cznUEbkR7Wq57b8bD61twZab0MgFZ59soM4eRratopz6PfDq\nCRnL\r\n=W3Vq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD11ZhGoTDjFvydtbdsz0CamrCLQXxEnS3Ztnl6nLISbgIhANdufrMptrQlFqcm5GJMw/ofHfnidIEGiJftqpajAGG3"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2111242025.1_1639095145914_0.09598600369772292"},"_hasShrinkwrap":false},"1.2112091956.0":{"name":"@bentoproject/stream-gallery","version":"1.2112091956.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112091956.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-c2BJU4kCKjZqPI33l/hnyZLFSjZvMxv0BJemRIfVen34wpnyr65R/rDKamQe0t1vsd8jNkjL85xu80EElIT3gg==","shasum":"e4adfae97478d7b7a44c62a5d18ce489f27f0215","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112091956.0.tgz","fileCount":29,"unpackedSize":2924908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs0xDCRA9TVsSAnZWagAARyUP/042bSJBOUWrYIAs3Frn\nSkBMT7A6mlzDRtegaovRB3CIvFiIliQ/zaEKTdFDUv9aICy2EHvXGbUaeGxi\nHzm7daTWWR8LmypS32HiH1kZxvdrCkoc+9ayunGDNlAECPnEXMli5EN4kreK\nosQFQL0KgLuCx20LeC0phwJVYT4qo4e7TeYcZc/OkTSsnCZJ7I1FtkkeGcpJ\nwLXDLXhOcX7/ZxhYFliV3OSaAFq6ou3Yp7JUkivk+dMmY1l2T9royu3gvvcK\nDj2XXoU/Kc4HOPsKlXc+Lncvpqkl/RYHZ74HVohMJTsRhxuKXZqgVrfTWolV\nYY9Ne7CtWfUUk8RQBq+tkIbyRMwZXiPJSIHsiIUngomgeTmX48Vm3vdH9TR/\nTuMG8lPlVnr4zWeMIsRJTc8emlKlXRooCmpsrcUjsaQIu0tDM/VklWwpaf4v\nRxPgyet47ojh6tOtFpP0HeFqerXfGPa7Wb9Hq4seAYmCEHwsifQpfPLfJHSW\nYGCvA5IqLMneQpb8BCaB7xYM2rAfDZjzoubHSgJtrKcPc0JZvAFLLwIFwLzL\nV3//VpDojVublc12L5etVZ/IHcVtpdqYJhUYVKEFq7Pnxo8Cb+srfZ2SuLHZ\nMFyvRrG/FWGoZ38YM6MlwYX23roEN7/oC4iB5E6TXCKI/htY0Br+RNXe8/3k\nne3Z\r\n=RXYv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPFkRqkiMvSklqaGYMGJXfB6a/AGQ94SR+/Q+W8mymbAIgbsBTspijXQJmbQ/o6Nc0Eca2+sCuxvfhwiWfjEp2DWM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112091956.0_1639140418993_0.35448610530615143"},"_hasShrinkwrap":false},"1.2112102136.0":{"name":"@bentoproject/stream-gallery","version":"1.2112102136.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"07236921f8e25ede71217e1921f8aac93c30ab6b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112102136.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-wqbBSDx1SgkaT10eiTqVu1mjJhhdSs7UgzUZTYoYZjmgaTc+Enq41l+YsXF6378NbwHkeuiZ6DSuT7yZHdvAKQ==","shasum":"bc32a37264f1c415dae09a78f0e223097b8baa70","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112102136.0.tgz","fileCount":29,"unpackedSize":2935898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtJopCRA9TVsSAnZWagAAHbwP/1wl958JaJbKL1EiiOwY\n/zRKRH7Q49Vh0sbssFHrDtgs90nc8/RM4ynhh01v2azK8YjYHR9oQxFVqY9P\nJz3yivHkoyhvELF72SzKdBmzqO714bFd2gtzrPW7A2sI64LnvNnttyn0MoVZ\nh5d0L4PnJbRyYWVxQ5iwXRPd+piM8IMrK5qfPkSXFtua2KCEcF1dzGypakWi\nbd6yQ68ubkRLUDjmoyf6u5tPN5eJilkmn0c0x8Y9fVxuwnyhLGsvntEVy2qf\nza9MtNqPFL3Ttun6F9NLgNIZ1SU0IjPgFPOQv9worwJaWZBMvCPS/NC1I6Eh\nXEXCDufstGk2Qp4hGWmHx/hvaoWJBRWsbEPkxAvzOuCi9TriT7kTI2XXGB0H\ncXfqct/GwvKtn7Y/jWk5hW3nwvzeXLx0IYrctFPM0YgwEhKfW8xWts/ucGLj\nK5DARXjqgG4LvEnWyd2SlBetDyAOGdDtjTcYLTH/HAkiKmR0h5o3sr42Is7Z\neGGwurHrb/MJWzMPK5T923ajsqtogWbDl+w4i6qHZnLTc9/EL7ujONYLP2nv\nTf+sWSR1Rw56GhbusNh8dmBrAYURzM4EiPZ5XjF1heAeFT7Bd/vD4ur6PPN+\nl4RQztYjf6t6gJEBuYMj8wBit2t+2M/QXJhnEAcr2fN+xiK1M72r2IY9k4nC\nVUFC\r\n=GwPK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDP07HCgYu9857cL+2EFGv1ovJbyHBX3mrHF6tGoMX8AQIhAOmDsVDVAYDIYrIXhC7ZW+n4yr63HEDCu4neJw239SrE"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112102136.0_1639225897088_0.30659247885477336"},"_hasShrinkwrap":false},"1.2112132331.0":{"name":"@bentoproject/stream-gallery","version":"1.2112132331.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"cf62ae1d6a12b70dfb6a7bd8ce66ed5bc6e30d1b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112132331.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-e+/l7fCUDH6LzH1tAu+6n2wFAw9573BFGm88AstUF+0w5zvxw5EjU2pWmbKEIRtHtss6oI4CU/WIuWvtyiqOFA==","shasum":"23cfd6ee32ddff330b3a08a27de37b4b725b7c34","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112132331.0.tgz","fileCount":29,"unpackedSize":2933715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJU0CRA9TVsSAnZWagAAY1oP+wQhjONBLxNIW6KKRPqF\n+SRjFcvz+qFNH0RPPdmSNbc7gdq6IVKNk7o3pW4l6vawf7snKtps00EYrGpo\nTY2nA0RgO8ny5CbTiLk0Agtcp+RK8ALiy+DGtxeiLPHpLLHRLraMTmt/lHTM\n+fItnAnTvPBRg7CuKjWHZeiHpysIQxuznScjZNv19EANTh9yGVp59ezKh7gi\nziyWP27gz72Z1hP9stnl+DpKzRCdin8kqGrV0dzasFu2eAz828rd9MkScQS4\nz9jIEYpClOMSFXikheDIED5YmW2E+yyUnBkCdUCagA+4QbZ3UStlJYYUwWkM\n1ITQHIETho3lJnv/pXVwCXs8tUSGax1tEt5OQ/eX35f9FvPPytcGhVN0fjr5\n4H25IBV9N7u+ts5+M3J2hNRMuqxsMU19SIGWKdFVlU4SNHBccNDdy3ay9ymq\n9yu1oMv4yF9RRIJT5A4WCOeWpzbszYjJ8odJsI9Z5KW10SkstArrKaHebMdx\nbO3YTnsUxEvWUyXP2jZ3IRRpslKwPbb4uoEw2plxUp+eVOMwIjloOAh9BoT2\naacFDyYmKXxaBWzIPq2NhjrihwQs5VA8555XW/li/2NaJphMbBEozYo+CsRU\niGo2iAubiRTsutPZraVrQK/KIKoHIsIhFxKQcHBu57IqgH8AkdInS0NIEYYP\nol7b\r\n=0ZcM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYvX6Vd6+UjlNHk9IpxsysbZIieGtyMLgS15mlalyLAAiBRkYk0wDNEDAgL8PXNZa0RdXp8A8QiJDLKuhAfTCiXwQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112132331.0_1639486772603_0.9543768058968252"},"_hasShrinkwrap":false},"1.2112160003.0":{"name":"@bentoproject/stream-gallery","version":"1.2112160003.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"2bfd164830b15f49d7d86cf73821410a039d9039","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112160003.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-bEzKg9aL32TkdM5x7VIwlA59Uk/khZvNeT2dN5b8QVi0PqATGx+QVaHVNlq+aKsmc03CReF9TTTNV6eOQ+zkhg==","shasum":"78df2f99744dc22da541bc90ebb5b54d474b2731","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112160003.0.tgz","fileCount":29,"unpackedSize":2933983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuy9oCRA9TVsSAnZWagAAQnAQAI6Z1F4XiWURj98oPm27\n8YqRDgyl3tdKMzxenK6QqS06aR4b3w8kaXiXjzV5JSu/E2X4BKAI4uAFX1P3\np9PI1GJhWKw3SauUuXul/g2/H6G/r3ErOuUXsy4fg74MIBeqMX5pot+yDkgj\ntgMqPcYrpP3X2iSeyWi4sQIdQyHY0JYj+Sbdo7WonR9DR4J2/R1BCFOMHD3K\neNTG5vIO6ZyHSdRuK30ZKI0+hzt+0HFzjyMrF+QIt2verV7byco0c4GBvh42\nn6cSkIT8zhG36TtPx6Ho24+1KvCfKC9hLbOd3YDca0pfZm9EwHNLQI3lg/R3\nLCq7URRMlMsb/o+D9bqyG/vqc1dnqjPzGiFqtkUF14Rpm4AgWllA35GnfuEp\nkO6yvv6CC9TI5enSc8qZJyHtakFwmic9fP+xDBdYoMqphPoYc09sJ0/YC+fR\nQkfAEZvzsxogDVpVN+u0futNakgdg7wHuuIiiq1X6SAUt+EmTE5CUD+8L5Lk\n5UKjI4jNFaxXT8nv1UGVBA//poxyhmEG6WdeZ0aGgiA5udt8r2NClfuwNbeg\nRd9FqlfU3cNV9t02hENgZBDfcvAjCgczAwu2UxuG3dpYqyfD50EdF+KpHOe5\nU3ApZauprK7VHbCjd/OVL5Mdtb+PGw2MERcboGMmA+7cOaXEw4wvSCTR/TmK\nf0IK\r\n=k2j2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChjvzjJCjlnrC5MvvB+7pz+GXVJSC/IjkyCWwWLJtPIAiAyAMI+b6OW1oBcgr/hZyK5SgfaCBY45HhpaNpKIQoXWA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112160003.0_1639657320573_0.45338635705117847"},"_hasShrinkwrap":false},"1.2112162055.0":{"name":"@bentoproject/stream-gallery","version":"1.2112162055.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"e3242ec094a87348831cbdd342f5187068444994","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112162055.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-1fkUWXoyjwvR/hPeH5/cExTL+b7f8rQYrE6qQzJg9m9rIO3rdw6kzb1BH+fzMuk2MwOCoE8zRA6ilPEohyTHAQ==","shasum":"992d0f0cc3c314301e6d0ac2bfd394e77c8a16c5","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112162055.0.tgz","fileCount":29,"unpackedSize":2933887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvH/3CRA9TVsSAnZWagAAFLQP/iXP+4+9ENrFtMT+3tfm\namtWT0ljwZO+RMSPARZoY1s/RQuwp4VaHBf8kXv4hI1rqhTuvPcFzowcTYY+\n4zBdyArqC6wbiRDY5dFBEdjqkSyVZdjzh/dC20Kh7814UcfxWJK5QvhyItQY\nf/2wiVrr32Oza0L+Y07FHtofqR/h4644sR5dJu7WS4rvjsCu/3/eezSwCvK/\nkq9mMY92G+4/vkbefekV8qmd7mhk7QmZZUJ3ESpU5lzuR44nnqBQuS82hn0p\n+VQnSxrZMoWRU39af9ZQDkudKuGrxG3Ay+WHW2e966rb7PZczb6Swf1GAh2O\nmMY4Q5oufSjULwT340QlTsRkKChp7yG7WA0LwaJSXICN8qbzNUXpl8EqCMbS\nFVp5QWnSpvXBaduY7ZIa0IGJmMRqKpaYZCLJryY0mWvlsA9EB7N2QLQYqj4Z\npPyk0Tiq1Jy0ReMF3/2+BCozbCDHXAV9L52pDM4iVzWJuETYah4t7XP6gPRK\nr/IzlTtxuoswdjFmfpRdKPNgjrRFgvhomOZlt5kK+NRLYMlexq5VvUs+x35Z\nmMeX45ntlJRqhd+hKDRmQ6tYX9t01KQhAqjDMmyfI4eM8uuHidE+ibDTcXOD\nlMr/w0iv86u0C9fKZ0NFGnjnA7S+7mLK9WFWZbhtOemRIQ4C81PFGGgscX+e\nlrMM\r\n=VdTe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1o5Ba7iRkzgC2/itW26SSv30yfVojVMbdAzc+MLbYjwIhALqFIB4NCT8poHfbYyfnrSe0TEb5Q8aSixq4hu9Z/PrQ"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112162055.0_1639743479511_0.6835506168665664"},"_hasShrinkwrap":false},"1.2112170012.0":{"name":"@bentoproject/stream-gallery","version":"1.2112170012.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"38e50237c04e29792bd0ccfdc13308940a873817","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112170012.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-iCDKzNZJk+mYzHM5ATxPNTida4ytxEBIo+TRv/jYip50+W6OtPZ3cyqrPFtLFq5LMcyfxU5hj7Y37hvT6wVoPQ==","shasum":"fe0707c4ae65f0896cc29965f2935837181f309e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112170012.0.tgz","fileCount":29,"unpackedSize":2933887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvdGACRA9TVsSAnZWagAAjw8P/0DfMfghRHybQb1dmAfv\nEqLLhXSKujjF+3to9rR3FcHocBgxrBuV/hZdlgeRQOi/nv6K79gl9c0PJUQH\nJzc9ISvYT84408JEZUfajCyRnYHAm8+hM2bglWCXGtl7XWe8/id0mgh1mPXG\n+6vluRn9AgI4bJoooWKMfmnV5mmZdmyfEG4EOrguTPXoICtZ2GGOP6RbQqe9\ndx6CSRhKnvfSoHgCc2crVqrvynk80VqW2wH/axIez+7fPuBWLnLZKwQ0i05D\nf4rLkBzO97CzNPV2JOOWjQ9Oglatgra/nxDWgHs1N0lz0vTa9culr6xvsfJS\nt6bt7XBbaKhcZBcjByNtiXNwLBEe7WZaJxvjaRDNeONZsZ+Mi+vFmaDDzp2I\ndabcX56WuyHPYJt0kb6eGB4w13QARIQ7zbogqPa0G0NFI5heeIP+Z+ht4NYb\nwytHZYt+JyR2GDXiCTMDxO1+vbWqD/9Is33inl0NuHv58AncpX6L3lRrMtJF\n1PYtHS2qpfJ5b5bomwFA1sRhSWsZ8ROCuxF8GddjO5Xh1PbRgFTYj23Sei03\nyDe846iEukHDMyYeJtfjmK7QvGrxUXQQZkN/r8R7oT+rZ1dlzPuUWVcDj6Ni\nHRvOi2R5KsA8iifwFYG1vD55aOib6xtwqSD8KQZ6vz3KtPl0zexgGLN+VvOC\nG2Jc\r\n=K5az\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCprboTFFBcUFdZAEWT3Z5TZxKnw7qK0wWLWGjYWzGHEgIgFLL8nIr47OlU5RmxmcFmeuC2VpuX2UrVPazG6xvdjZA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112170012.0_1639829887989_0.26457971526545054"},"_hasShrinkwrap":false},"1.2112201724.0":{"name":"@bentoproject/stream-gallery","version":"1.2112201724.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"a8be9d1eaab4dcebc8c170c9911acf0c8a5e73c1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112201724.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-xauK1hFNuubocAWjk54k9xcSlwoNNw8zgRMr37wgKYfmNfjm9rlnUVVplGHyu0vRIzvLVMjKkeSwaLrvjYg8YA==","shasum":"bbe14e6cf78126609bbf6e6218e671f087fda3ff","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112201724.0.tgz","fileCount":29,"unpackedSize":2933887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwcbVCRA9TVsSAnZWagAA638P/3EkSUWAPFP7Tgbiuej/\nJpAc156GYGXGR/VswsP2fIKxhXSNcTxmaOmJebBumHEDzpsNk8igdz6SBAi7\nlf8uTMnjRjmw72jhKFimu47cj1EmiHNYcvtShKCJ3/scERuWIuARAHUbDbTF\nzyECkeeJvvGGj6f4qjbAOmMNl5fNp2kG6tjvuDRSRY1OHVA8Qev1h/dMEgh3\nm9P1CLOcczX7QhcTmUXVd0X7boHy3+tHdB5Zi3V43Lmawt9l6WNn77oRXp2q\nBwKvmUaWBfq9zHiLxldt9mjYTe5ae/v3MsxmxAHiBQP79yf2yQlKiT1JCEpT\nrkzaZAVcgR/+yEMPvSdn7ox7yux/Pu0ItG6sac6HXpzqVfVMe6s9keVQVdZH\nQpOgt4GqQEkr8xMTEWkNGv0YG6rcfS8QuJrLuUXbRHu1a8oqWQ8x55fX3k9z\nqYohdkvdE2Onq4j7JpE3qMG+jk4gAdpmAe6uQfDJDx0yXVjh5ph5JvOj7ZrX\nwCNCVX4PeHqlfpJNNOwAQriARJNLZdIuV777VpCWuo/1HejlUa4++6Cg8108\nhYnoqc8/oWb7CFd60crJHKIgm1L4AR98PjxCvW7zPZjfp2XnbNJquTaQnQ3Q\nEYzpbFZvF4Tk7ek82LO6TeAReMcty166/jiwGhKMN3DDL4k2d1RiIfBbhhQ2\nceqL\r\n=zeqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6GEq1gMQA9gUWsa99Tum5thFkapLlM/RiR0hHMsUN+AiEA+Xu6MSgvTAaN8HthT+uTp0Knllms45qZYqNXK9IaOzs="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112201724.0_1640089301001_0.9072244305932391"},"_hasShrinkwrap":false},"1.2112212349.0":{"name":"@bentoproject/stream-gallery","version":"1.2112212349.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"a6b6a6c259283b2cfcfb474966602c2ada072484","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112212349.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Z960yBkDWfrfa/hoT1nmps4LI9l++AOLK8JQKOoS3d5hBtd+HHaLPdrioJnjeHRCicxJ5F3mO72kpUZpixyiRQ==","shasum":"ce51de68a126bfdc771100d9e7b4bb1935aaa6ba","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112212349.0.tgz","fileCount":29,"unpackedSize":2933887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxjRCRA9TVsSAnZWagAA0/YP/iMTryw8vhygxj5MXOzr\nSwDBlhib8poeloCBDtCuHI3C9yGr4a4vw3j1lJ/7hWApleQrrvmQYQe744lD\nir5HEr6geY/cown5CVL8virSCrvN2E4+DM4mucH4CDpC2bHBQX8iieWuOIk2\nJe4m7871RA2hpvmMRSfR5GFSmo/i0e/XcjlO9OE7HQQd1ZYc/ZBlSQF+UKLc\n1ilOZCLp4JTnav8Ho1/7+rhykn3SukgGFIZDuMkFdOiJcGIyR1JSZRzRR1Ie\nAQWzJQZMUWTE7ioUE77D45GZzvWzjViYY3ZauXkphatwovN7Z1WBYAfz6evk\nGzkhMSDLYWpqfcZ641+EtEI8Uc1Kh+B1P0qvpTsSIPNFi/R/naT/Nx5b1kqd\nJcLAEOvKMi1Clk7y3Pvl6tU3fa08JmjHNIlDiSJEuXARSFD8dqnaRpGWwvry\n28fZdyYNHX9mxKvTe+KNga/tTwaD1D7EQD4negRkp0UQ0S6hU2pQJVD16U2b\nz5SVKTL28/F9f9GIzYjvAkADBmnPTGQLySsfptkvbNbP/pHgV0jXcRD9w64Z\nK+EyJ7TpqBjH0Nc2Alfhgl+pTMKAd7U61Am2x1Qj7yEuEx2sgoGUTDxIbkgl\nQ50iSLnrucDVFva61i6OS2D+zn59/KEg8ZCQ66PW5YYeuy/eL+kl1NoIrI5y\nTGo0\r\n=emIh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkj/Gn9CJraP+/opCbM4U/vyQ9BGIxcCH+V9MK5pbs5QIgcOjia6PvkLnlh+aI7JTGIqqk6ynLBdA09fDJfKD7PRc="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112212349.0_1640175825229_0.9073930010826416"},"_hasShrinkwrap":false},"1.2112221739.0":{"name":"@bentoproject/stream-gallery","version":"1.2112221739.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"5d282652a97695e5ec57a655f76c0cb6d40de066","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112221739.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-lZEHaRzmCnLl0o1/CVy/NX5iNqgaKk3FYdnGL6O71f4Rf/EfN8XZj42Tp8UQ2yvqZ/WjmEFRZY1VlIoQiHbMbw==","shasum":"0ab54caf37b414437572ea82b20243b564e95dc0","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112221739.0.tgz","fileCount":29,"unpackedSize":2933887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxGkqCRA9TVsSAnZWagAAyNEQAJhegPFtko44VTOXSePT\npjooj27RkJ8o/etuk5enHxxXpLZ1beejgK667iOJoB7KWV1kJHSby0pPza3D\nilJ6UIExP44JPUeJ1CL2afNS/jHROnOljpIPuRR2PXyvv+upeTEjXG2ldoyp\ngbDcEtq70QwxzBkfbdDqHKO0tLhpaUEipSahoLPtoyIwQ6yj9eyIyWEKB0DS\nJbB+Kv3ocNBccwYdoNPLbri2AVduwzlg20DQDBs+HvP9zre3HIswV1SLYeKN\nZX5iv0dZPOqdo2+w3u26n1KYd98NOrR9WLXrHNjUH35dROSkD4iMgyVs2R5Q\nsvxWoTKvIulOD6x4LHdBMo5P8gzZGtoCl0HQo27vsMjG3oeKmohLUAOUZh1O\n1A1M17FM11TZQyyz+uyTawGCwWPbmWUhsA5ptw+z/KEKTAgldskcJ8kGf4tE\noG2gISs7AG0rVQTQCW+NrQAYjjvFd688b5ryiydk3o/mYRdsjif4Jg+5yUXe\nuC85FQxp6G6gMBcVj+ylyhkc7eKTK6pgmOmkqgPwrbUmIl09lTvlaxE+J7Ax\nfnhxuYhNHiwxNypqgjhoWB6/bkgcFpNkebUzYLX7oyXyOgCo+1X8ugbE0nmu\nswrXuaW8AMh+EtXPvJSOW48PPOC+sZyqQkBg86hrHW/98ZpxL+FmnnvpeRky\nW6Wq\r\n=WYQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGmWQqKRJLo5r+t69SL5h1Gklpdeeh2mhrFwqIT/3aIAiArSfMEoi53cY9enrmKhz1X1dw740c14u0uiB9KSS2c5w=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112221739.0_1640261930219_0.7667672259637452"},"_hasShrinkwrap":false},"1.2112231523.0":{"name":"@bentoproject/stream-gallery","version":"1.2112231523.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"3d06e61b6949affa49fa2c89bd550777f0fc8c3a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112231523.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-kMXAQE3GG+OzkR1/fKCIxKFrEHs90Rtbyl/Qev00tQJNN6q/pjlXSz4IoM4BeViga7xrqiUkM4YJh2jSwKBr/g==","shasum":"3120c95ff2a2aed5e6842b6af5f1ad9aaf067a93","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112231523.0.tgz","fileCount":29,"unpackedSize":2933887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxbsjCRA9TVsSAnZWagAAww0P+wQlwvvfIpTyGjjqfbod\n7teqSFu/1EBkYArV++oCb6ihYMCYQX2j5cK1A/N5yKtn7VXt9DOkKbqnAqZL\nZAZ2l1vYfB9OxmGb2iH8/BdF2L/eNkmFI6DUlwzUUWs0dQTsCBMoEDlE6+aW\nCARxr0ANDlXuuUbtVmff01mo1+u/3+eivic1Wj7Odmyd05BM0pFWITuJgkTE\nUk9AR5Gpio55vvBo3mKIKIz7cr9kJYCCsNreJkLV39fq3Z6nIaaXlKHK0qKc\nQKiGQYIW1AmLKK69WY8n7Ut4+aVasRjUuGZLbejzIBe7mBr9Sjh5gIJ377Qm\nY49ty1UfM2mN1TtjSEwnemMub25zxCkaKAdnAm71roCkBxBTuB4MYMDoQzyv\nlJvK666HVIPJxSDgEW0LOSUTAlpky61knLNzEN3gAiPNs1xbgUexqdHlaRlf\nG9gOev98WPbJT1LIQ4/YeciCgXzRNW9fp+I5LDR43to/AYVmC3rXuahm1IW3\nyv5CmGibZGXxDCHezWG2jGkdrtEQULLPSRlttFPHCUJGcTRXrngyNdhBF9xx\ncL+/0FbqerelfmVJqa9mY1ASdXrrWrKdEbsHpTGa1ohF2cjq92m7xNod4D6F\nB2V2K7lOFTiduwoWReW+nQNu7Adkn3CjCU2JzMoZDkaOTbjkHAoKXiA0Us5M\nsV6K\r\n=ORx1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGH7C/K/MzxynkvcwCWvv1c6VUUGYveLB4g5v9SGvkQnAiAT3Dh7bxpHnay0bImLe9gmhT7iqUKL2xZlqk7epxJzDg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112231523.0_1640348451542_0.07201439326294645"},"_hasShrinkwrap":false},"1.2201042109.0":{"name":"@bentoproject/stream-gallery","version":"1.2201042109.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"9526fe41f7489e55b2e2a8bf52d6b0e4367e19e8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201042109.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ptbo7h0WaaA/WN/oKb7w2adjNiS1JwrBLM1amFH3PwhVkxdmE8ex7AxRZCg/ftWuzM/sdi075y3J3MYmFX2wXw==","shasum":"0a058444b87ddac020f8311d0536d338cff66c4f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201042109.0.tgz","fileCount":29,"unpackedSize":2909472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Y+fCRA9TVsSAnZWagAAcFwP/31IT8l1hYCHBGHIZeNI\nTyJI7ecTUy9rEt2FRZOMI5VjyKCMmxPUzb6HC1PAxZa/hMCw5NRsE5vj0UW0\naYj0AvDb+sMnPJUf9OaQSMJfaGxB+zgwGdNjqiXZTuR/3DV4BdDKUEB7fsFI\nlvu75yJ9vlIfpzHvb4gUYUeptTQj/+C3OJ3jeUmgPurQ+WIZXfG9VP/6Udv2\nGUY9hYEIEKz2m4f7+L6Kviwydx+p5gh8R+A9sXbormnIuzWJLXKiZfkclEWc\n8jtLRPd0QQ73I8TAoboXwd/BAPwin+ZXytsF9vo+R1gp+oaTNZLgYY/Q4DMC\n99n0K5Yk7ppr0uteuwL9OxF/Oygl+wsYqEqwgYyEr3dP6dq0QyLrXWV/Dg48\ns/l5uvYy+rFGrqchJAuLnyvRdDzNKzeb7BWl89FsoQLR8kRqgV+gNyDCsaXl\nOcBbywjumNE6TCFwQ+xYtD6CKqNVNsRSYf1NyWtcHpYHgOwjlhQklO3eUdLg\nZpL1zgeDVAFGmAHmIMQVTSDN6EqSJxFC2KueQ/ecYWhsmSs5Ql7M8uv9tGku\niXaq+ttJQNR7SXxG8dWSWrQoV0NZKe+Ko4KKaLZqfDrbrLTrHVYjvBQY5L91\ntkE/TWq5y147QKYlhm2V6FG8tCED7YKctyQXcc76vmL22/ygh+N1G80sQ7Ui\no23Z\r\n=gA5J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI1eHOKu4UCPDfjs7vwpMdvWCQ+AjFt/mYJVc6RbOQIQIhAJ/R7sUegZx92Mcg0C+XKSmz4a38n+jXOF3CxVLtY7qr"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201042109.0_1641385887494_0.8676166544970989"},"_hasShrinkwrap":false},"1.2201052144.0":{"name":"@bentoproject/stream-gallery","version":"1.2201052144.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"09cb7c2c04a007089967ccf35accd80cfaff0c83","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201052144.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-YFLStKumSmbe9JmEoEOCxjOhfeNMr8FB78wKV0/WReIID4WQFotIZpyjubEf3YSmNCbq3KB5Z4L1sxI7G6rpVA==","shasum":"5416a66721c2e6cc1494498f3cb99427c65e4300","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201052144.0.tgz","fileCount":29,"unpackedSize":2909472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1uPQCRA9TVsSAnZWagAAcRsQAKBI2HVpaiQjcbGOwobc\n/3RJAabm2bdsRHR/aVWy3vnwS7okZNS5Y7AjeNfTZPRWmzH796ImDfdx1HxF\n5pT4seShnYiL8rg+Kcy549k9V9cP4PoXCG0XJfpdCD3yV0yfWkcf73HU+hHO\n1pzNUh913rqJOxBVDoDBddCBlYr+yqAR5vOd+lunqcQpodEFINvbLtMFpfwt\ndMgIr/LPthyymcBTs8/U8fwOD0CvSF769GlauhjHkcsjV8VAf40jrRxa4gPb\npQKy1Jmj0Zhp/cVP5yZdR3rSEAO7HD/AiRw3OyH+pRbsp0au1kPxtK/YKeIh\nX/f1Uyda7dDV6ihJ5aWzN30fX+ZWD71/G7l1JS1NRSveFuZa5qZos2DqgwEt\nkJL7jJJ4sDjDQgRCP5sfz7Zd6ZSEZ5tjxid9YEHXa5zmXOwTnXORhz+81l7P\n97jwdeW00cO1MlWB2hRTKquT4PkM89haNj6Vju7a1ghWt0bKuy1MGbxyaNfV\nPjt1UjCD07ThWN/Xz51TjVg/itHGytiYGZ06kWJNQx4Myr8fNP0SIze/eKr+\n+yztebiWOkB5RMMLTxVNfYRXIPUp500ITbRpBkVeVmwU1TwI1Ju0lxV/hLda\ne4YyIbm8w4R3KV44ZawU+U8rY37V56MXopvBPHuX6yl/PYXkO0PzYX+FMt74\nbbmW\r\n=DTan\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuAYwqIGd49X7B5jWs3CEY6LrHbQg0aL8iTebeJC9qwQIhAPPoZU6jZyjwwZXTdnb/C7hPYQjIwsz5YedxiNO4TM/o"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201052144.0_1641472976514_0.9335506688611492"},"_hasShrinkwrap":false},"1.2201061922.0":{"name":"@bentoproject/stream-gallery","version":"1.2201061922.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"737b882748278c09f4270720744c1618e36be6ba","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201061922.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-IykfqNBvlvL2JcQfUrTRnZGrL2O6CoSkqJg2ChJTb+Qbo7+XprdsSYMqXYn8KKesJOxKiSxvE0oU5UFVWfq1mA==","shasum":"65be0534eff255156d9845228dc45a8faf9b210b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201061922.0.tgz","fileCount":29,"unpackedSize":1637778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DM/CRA9TVsSAnZWagAAwDIP/3rHdwTJs64lj921l7qi\nDfz+LteNNZH/QS2jGIwStyRwTBURPyJoTGw/SA4LaXBVmQS8dkakl0dBcGah\nHQx3DW8NPn7enOmLWTb1kIPS+CnO846b6QAk0fMnZ9nZaoOdmY1wevDBADP3\nNqXmkoYfp2ITSkNwyQgo0ZzgM5phkztXPwlTVwt06YyQUz6vumJbB0IwaJ2A\nHuFxJdL7ziH1H1TFYatORqTFVZB+vOIF+4ZDmOrohwi/zBap8MMP0ktZEda6\nwpiIixQRsumGoqYt/RCeOf/8mae1/z+ytLD1FGlt2TCtGinj+qMbzEtISXhh\nL6mPYgXZNNdnfAxR8ECDK3E3bv49IOJgGYh5qs0FsMguHQM0VSBAktSfej9R\nulNRCieLQ9plDPgfVEYIIm39Hoqv8lPQFqkmL4R1ILlGN2xctIuP8EafKAjW\n95zy0fEJmp87uxj5JLmIDNI2G1l3Vd3h22mRKCcAONqN0hYhnkhfomqa/jmI\nN1Dqfx0lJzTsAAWDkjUD93soBb+4QoAgrkcUp5R5Js2R2wzzqy4hoMJhz0XK\neq7EKuSg8MB+CrIm+pZnGJloOVuCzIlgrVPqUxn8TU46+cYL/sseZR/1wGJa\n0P+phNQ2QKpW9+/1mQ4Tn9c2LHsNU22ip2FAQFg6x2TmCIIYemUMuyn6Lysc\n3Sn6\r\n=TUM6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4Qk+314hlppnMzVfZNJ/63IHxvNQxo6/T9NIp/aXs6QIgIlfhH8CAaMnJYIqyVwqs0rAnNyhJnJTOg2S+pHlk6Uw="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201061922.0_1641558846707_0.08313922246333183"},"_hasShrinkwrap":false},"1.2201071715.0":{"name":"@bentoproject/stream-gallery","version":"1.2201071715.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"e40a24fdddceb1c635f67571d9cf513c7e58800e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201071715.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-GVNHLpvzZdThSEYuu6SsIiRt7JySTtfUaU7naslJG6FdodKxHdisfeZim5BFffUE6WlhIJVgxqum8hWutHn+fA==","shasum":"e479ee99afc5f08e240939d1956a8689fb37a896","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201071715.0.tgz","fileCount":29,"unpackedSize":1637778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2YJvCRA9TVsSAnZWagAA3GwQAJ1JHJUVKMSrXW+FZhHo\nuIe09Sm18SPqJ7A9DZ2BcKV7pAjH0TvEUDDb3i6GbMhgO4r4k8RgOFwKosWJ\neqP91vyzpE5OVD81oiIo/LknFU/kZJPG6qACVTIEq3dTm7dw9f9uuXz6HlbD\ncUd9TwYh7PbckVqi/+FcfYzzqX9ufBFBxxgOvLRKt1NYqWfcCuHoqUJi2XbE\nXwX1lVOuXd5kebyD9stjT5RINZQWwmCWtaO99QDBQfUB1Zg2cGO58PcLaV8u\ndAqSYnNouxgBBaUc37Gy7pNA00qiY2auKA6F/v7ndo5UXhO1op+wKR5A2AIP\nwo4mBy8s0O+2iJomYySuZ1OD9INviQ4KgRG5fEjf4Cu/OvbmlSHWZO8X7G/k\nd8rW4mz+58f/kb05ytb6Ib19wcmPhMTIvQLMcymxRL7D0AqW47fr705HHgUf\nakEE+orEx4VCBJwOn+WhvWMbiHZcQ5II3bgHJFNXhbbZVbd38PlzDGNYgZSU\n33Zy0Ua+acAu16LyHsoF6QgHWT/zXFR35Q+HdsHgy11QErPEHmn5iji9glGV\nEO2rZEmVu/2NTrHqlcpJo8lm9buEYAxGN8VO5KHbKEVC90IZg3hz7JHQuqUV\nWkoPtgYc8UZxb6XI6HvAeimMct4kk9OuI9qAqDF/FGse5bknyTZ1Kdrt/Yp1\nWJOs\r\n=Fe8w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEnDxQ3PX+DzkHqya4CSlAkbHNVkJRrqPlGdhZa1fybeAiA5N17MfYq4/+wsQTmTfvVTkmwDyXv0rH3+ay0Wt6c9/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/stream-gallery_1.2201071715.0_1641644655684_0.7468714130428564"},"_hasShrinkwrap":false},"1.2201101902.0":{"name":"@bentoproject/stream-gallery","version":"1.2201101902.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"f0b7ffe685c60b51cfbab92bada4e0c87e0377a1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201101902.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-rRhKFFth58qrFM0fL1peU7+WdnXLvUHaaJnu5D9AjgxqemHaJOyfUDGFeyNMRdvEThSpDG+vq43am3qTExn/8g==","shasum":"9de5b81ec6e3094002c64922a4d367ce8a4f395e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201101902.0.tgz","fileCount":29,"unpackedSize":1637778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3XhtCRA9TVsSAnZWagAAY0cP/01NFn+NkzQu11nJZdNg\nwlDs+2LOvQfzfT1l1Nkbx/+HqShvDFcEUugFB+VL/obu3tTwKbUActA9Eqky\nKgcQe7B7a0N+RNLpYgF+TIT6wGS9y+fQ9m6VhK3ZQGDTPJkYJ6aVlwq6wX35\nTau5wA3lps0V/WnSfK4Anrl3JuS4vs/lMZrFg2+L5gHuLTt4/9hNhLJMjHLy\nXgtDRrY1tzj70JmEUALt6gj04WnLMwWj6bPWuNCG2JvstdykcNxxTKOBamZY\nsUMeGPFGT6Lf1/qOaAPCuXERf5XGsS9igjUcGn4G9xq1lkeDsmtctVDPQ65h\niVRBlwcCYBH+p38rEb+FQUTu/JoTjVcovZlmHKt6uPF5/MwIA7fQDJ6uFHMl\nuSR6Fzw9gkJgSNh2T8/RXaew7AiF4LoTYdqTb0xQv3d+fkDssf1yDiQqSI2C\nVMIfNeHutA7M2BY4BKcqzEe/QhF5/AYyVdMMWiSfykgDkUZi25jHT9GoVzb9\nMeChYiJ41UwFeeao4uajkCe0J1gPh9KnAjbna7kuOX82cyk8jSDsGzZj0yPl\nUe186SFJvZU2QdSFN60mucWwhBLufK+EH8ZLWNGl2B2XBRr0A2WO6pbGWBhu\nDrvBg5UookiqtUEDRr7riDhpxL2cwQHoG2YEBJnf0DVtclq/qQLLNnsHdvn+\nKKWr\r\n=VyGK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDZfxGNvm0WM8YY5g9nrLlsbhHTUC4t6AhE4QJInTHmAiA5MBUXxJTQCUON+T7lQKyE1Z6QgOhZAumU+Cd0N1BUog=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201101902.0_1641904237318_0.8420880107510751"},"_hasShrinkwrap":false},"1.2112231523.1":{"name":"@bentoproject/stream-gallery","version":"1.2112231523.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1ba2e6854831868cfbd5aecf8a74b09bb0fbc2ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112231523.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-adc3Nvu2oV0PXGNlhcF/NAyFKhnvwwJp/RQruNwDukz6FJGqiIycj4mx1uc7kyIg4K3P7owKYEuHoz+wATb+LQ==","shasum":"e85659d33b00323c44ca76a4dddebcf18aa1067b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112231523.1.tgz","fileCount":29,"unpackedSize":1637778,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3do0CRA9TVsSAnZWagAA0jEP/11hEsKNomUs3oyfn9XQ\nqDlWEhVO4dnEVnG74+u3BhytLcPu9/EdQ8e6LoHXFPS6/Zt8BkDF4Y54WGsX\nn7NpQJ4aOWapaWqz9HNio4zy2guPLMXpqlB+mwOUIGYfPq/DxyTa3RfuhPj+\nB3lRiiMMTGrQDcuQlMIiv3xTfmJ5E8a7IZnpvBLpwlZOC08zwT27YyvPtOBz\nHxKXc7ADxijzCpfSWxw6J8VLC8z+ZjxSI0U0BT/jkegYXsielBYuZoKn3gAl\nrWKhh0n0HXpmGTMuRWLbHc5KB7GwaWTtdaQC8rrP8UCwSDboJGYaTGqc44mD\nH5xQSea9+13/NQUnKnwUzm/65r0SPDsEOIkk+GfsvRZ28iKMYNFKEB2Os+4s\nCFg5sRB4faFIu7kOLgyrhvimywQGU7lbsFcknE56fSJuyZ3CS/YCOQrUNPxh\nn08BiGWWa6DYpHPGczAce17gS2iwhrf6Zz1HmPilnIdOzMMCCJbj4l9/NcrY\njcaAsabRrzxQZKB6RrsX/ycehU8cyoeQ2zBc602ocSPK5E7/Luz6jUCpMI5x\ngxGYsU4CejMWWBRSGZOOkPEpfgfQXoGASyg1RHEi/JUZN256xQvOwFA/YVuE\na2015NVDpC0x07L95Hlsj0uOFDxXp+Kxkp4Nh7byWs7lQSvbKbHSHmzjOqFg\nJIm6\r\n=WQfk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVe7smGPN1UcuUrIIFb+FSajkVYs7Caz3rOKnx/cneFAiA1wmkoN91B7SeRaoXK0VSrbnE27MPZFgYq1WlIiEgxwg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112231523.1_1641929268363_0.22565432193067014"},"_hasShrinkwrap":false},"1.2201120015.0":{"name":"@bentoproject/stream-gallery","version":"1.2201120015.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"c592aa0f3999a8b6109a8a31a07cae6a83115d8e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201120015.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-IMg9TXSGtHv4LBFBVIM1wglVOlL1fxCiXxH8Pemm8V9Qo5RpzVhDqXWFmW3sYD1Y8ClzBz+TNqLdLkhwJFJhjg==","shasum":"236d310068c48edda97ca00058180e260bf0d571","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201120015.0.tgz","fileCount":29,"unpackedSize":1621480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3sqXCRA9TVsSAnZWagAAVJsQAKFtnMgT76ylA/MrSQj0\nknInbmjOccXDeL+I/XU2Jj2/OBsXUb/bq9KuGw0rYZvPQMpXlKWl8Mipa6zO\nL6Q1wF/TsR0t0hk0n1iiuwUZmu6LyOKM/jOiGinMVDr5MnCdM4W8AN5t7jGB\nMFanrGvcR1NiraQByCueZlwR3YjP9HbdRWsObbn3sLIe1W+ajNyZ8NLYqcm9\nY9b20+J09fIFraM5JUGhaWq2AwOU6dYE3majoF9d980C0Tv8+/vZxbP8QKqg\nzHMjniHeDjW8617MhSsFFITaO6ukjdLoD3CH2qvAGJetS202YwJahECctdiM\nWe1sdJOmqQYEKak4jM+csT2pMeuMA3dF4gpqRFJ5apBYGBVF7hbAYQgBrWp5\n4I138p6w3N3k7gi9R3Dv6ezI6jIAGrS1OCYJWDU1/8oYuuWt4YebP8hb1n9U\nrNM2BXo5o9fQNuo1pYywm2Jp8MhU1UlBGa1lqHnHb8xxzScem6twdP4PHOHc\n/1I5UirSBVUptwKJcEsuCCFtbJjgRoeXdvZOxYqbMO7YtSMX1Vx4/9IlsN0X\ngenR/2rFtygTGv/dvtYqDT/zkARNXVltfIohCWYmJ0vxF4vxI9q+/N4XVJ6C\nE80gQpkYlpW8ODsOwj3qDa7EEYngjPI3fxj7VvkJ0GfywIN0GKKcSWhzxNtb\nqNlm\r\n=WGum\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC653bBLF+w+G1+CwoMJyuRHGhANIWMeUEREyy1//FCSAIhAL1TSkAGU99cm0pbvPJ+bX+YrY/wbVM3sDAxiSnYtgEM"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201120015.0_1641990806765_0.44696864851248996"},"_hasShrinkwrap":false},"1.2112231523.2":{"name":"@bentoproject/stream-gallery","version":"1.2112231523.2","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"036fd40f8ecb160f2d6c65688c6ff4765a670bf8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2112231523.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-aOUI67SkEUVZ7c923WFSZcPgaH2Tc+j5Bb1G4vaRNtt0e+Ic6NitYg9xTVoFbwIF86SXQyDWELkTgG37/cBgaA==","shasum":"06f6be95037e7cdfdd7b0f3e36a0c6138685b023","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2112231523.2.tgz","fileCount":29,"unpackedSize":1609015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh31kvCRA9TVsSAnZWagAA5QoP/iEzNed5WqUVw7FcLRte\n8JaLecGTDQsf+D5EvPHsyXtdhYvoN/LJ2iSWmDSQ9RY+Y2TBnmxeukRw+O2a\nS/8+GIn1Usyrrj/MH3yEnJ/9DUaPt6gfDLIHfw5ui+Fup29fi2+wyLC9iH+Q\n7jo87/w9ewAMYhOkxC4NEPuWk1oAZbyZzatHykjT7vi3F5icHUqHXqgirUxD\nEvlF8Q62+CaeY44kcq/URr/HkvdoC0w1IMslvHRJpORc5tHudujguXVCQVkY\nJ0KmnEG7D/ph1vZWPLQvE27ARTpxXy3hqjUmne0FBS+Kf0t2VlN6zE6uIwES\nMzzUrJQZ5+YNTTuvdrvsDE8/gkt7zojnMlHOF+T2H1ArlwkiPmkOW8aZC36a\n4mZXlL7oY3WY/6xAabLLYF3v1ZZcR2O9be2m+H+QhF68RC+nQmmYYFqIiBDv\n5IeoDJlhiVhRBlQBMrDHof3uMdHEgmSuIpTfOk0s2T/QYedOdwdrbX6dDKzl\nKBiUU6Lys5yTewJYHcHZOwP3VBie3r9t4rs3hSQabiT6vO0e+Mz9O5T5u5zd\n9KGME78PVlgiKvRm3xmFVTiLzEtrOZl4pCUQcC6LpvbrIq8PLdgpdToL37lJ\nXtZK/dbgKfkP9d2eRDj3sdJxmTiXqXK/Ydl2rfF4qf+oEbZQQVXGYuF/EzL+\nTsBp\r\n=YhD6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/IhIPSS40LDZxeETOwzee7eTHHK7FAmymjLgaOu4bjQIgdstUMss6Z11vmTRjgC+xuxE+uWTCdSwr1uqu2DtXNRE="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2112231523.2_1642027311140_0.7075127937551684"},"_hasShrinkwrap":false},"1.2201122239.0":{"name":"@bentoproject/stream-gallery","version":"1.2201122239.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"c04895bc1c2e1d0b7b874427b9bf1cec2b4b9f72","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201122239.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-06zgZTum/K711TXa7Yg0EKra9uM/wdMKGQzwWYi6rhDHTmt3nT/5F94qNw9H1+OXeepBwgWDJ6CYgaURzS1ZPA==","shasum":"e29ac2d93e1765723887203188ba102a4beb9429","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201122239.0.tgz","fileCount":29,"unpackedSize":1609015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CLHCRA9TVsSAnZWagAA6kcP/j+0X+nKceZGQsuV67yX\nSakC+kGYLYWNOuv2jV2ggC/IldExuiQ9viDOmtVh38/EPvLjcabdU2dMN9am\n905YOLndtS84ZqsmCpaqYDn3y8SdyLw1bzCxGF9IKEk9YBOIpMSw/+xmeI3Z\nnBTL+AhSh5CzHlE/xQ7s2q+jKmBc1ettKVejGZ1SBkNQP0a4ZzDCaB85x3xE\ndwgyo4UBBygVveQhrsrnS/ogT6zrWvVMGjFLUBCtIbxuaY9CyieWCxtjEYTe\nini2JhgEIWdOMH7N81M0SuMFUZoxeMClGf4nw5GKyga5lCPGZyAgfaaEP27o\nxxb+CY3b3d4Jt45esf1gLJRiiEO6bJCj8jSUZHG6T5NLqbjpmlDsPR5V46vf\nigCKu+MyLw+mWDqlsAlQZpGhS0Xw/Ar7hCUo7aFCxjwO5OFw7yX1JwL+57vT\nFkuYc13IeV5sN+FApXxpilPUX7IPmgwcSJXt5pozKlJT34vc8y1y1AZOMBiX\n/DAjqBls6FLrwXgSsUDzN4OYxT7NFLmn1sRqEmrMzL6V7Lox4VYg/egN66vO\nx6B4YGF0IjgG76kxrRpmwPASQEfeFMSmtIolay4Wx/Jyg/5LJRkmOMJ4O3Kl\nD426n9bc8+04dm9LPhhnOWyDqqIETRJ+DSfGSPMDE9WZkEuCA4NySDzdc1az\n7h2F\r\n=XkUj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoEW7ygXGR1+im4ymvFFl5eCXCYr8TFIPDTCMwc++SQgIgb9RHl2annuTt5an8D3qj/ALNAj/adltw2AaXfcdvxMI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201122239.0_1642078919759_0.6353552226137633"},"_hasShrinkwrap":false},"1.2201131702.0":{"name":"@bentoproject/stream-gallery","version":"1.2201131702.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"e9b16ad7a5cee398ceaabf6ba7990488624e098b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201131702.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-WRSRnz1sdzk4HrRXd9NQBefF4Ucx8KDK36Ly6+6AHomTtUUQWyA7IMtMZEoOFCarTcTHyZyg8DsBL1I6L/TLTw==","shasum":"15b1925631dbfa04990404d1df160589f2e29495","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201131702.0.tgz","fileCount":29,"unpackedSize":1611875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4XTtCRA9TVsSAnZWagAABUMQAJqgd8dKor+bV+0tPanf\na0hi27UGKQ8USnQuxKcI29R2pVDsXvNaZ8bRk5pXs7/il3wnZo7YFZ5EKvl4\nE2iZ/aqnzqt/q+GK7i4Pc1O+uATiuss2NRNt1G66YwcBmRxny/K1632i5FwN\n5wQkqIerlVgA9bMf4TtOHzuASfTKy3LujzVD5e8g+XOxucffJr7TFGhN+QRu\nW5oXg53rEGBj7P0j8guoaOUr5UE4633QdwEa0mY8qRdfIctWIoReGlo9ACf/\nQcY7X/x21lHsoDhwjXyKL7zFjWbBOQPbIpuY+o2Ibsq1hXFVtnlfXVx8H8bb\nFwNUP7knFfwRlazkii65gmST2KPYBAgpfSW7E2j8/WArhtdAiLDXKgt8B9lI\npImkOPduI9XnOMvR6d/dQNNNj6HQU2hkz1lzIq9Ru0sl0by/QGRmnFJ4ZRvr\npnkGmc13DO/Yz8n8f1cYQnl3pQBKIWxS5XJoLU9hXOfqu/zWluglfFpihPpi\nhWE6LSVyNDsDtClM3yxxzRtsPAZ5Ra+tubFPi9tXnSuh837WlXd56cIuiL2M\n314aGaD7K0PYHacoGSAhaVIKHYu506wKLQdPjOa07yKgOZhAk4nTl6eoTl5t\njzASo7pEMDeRajm3Rgs1WrbVHSPKxqECwIEekMnBq4YCnqtl0+AOO8UtiNqE\n4jNv\r\n=rHuM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiz1UWZwu71W0BcrncQ50vTn0RlvBSCZO8VcRzwbWBKAIgVP7CBn/ctgMrgS5YhAdwek+PCapaU2Ov/VI+FCdx/WQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201131702.0_1642165485599_0.2985502694770257"},"_hasShrinkwrap":false},"1.2201141909.0":{"name":"@bentoproject/stream-gallery","version":"1.2201141909.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"96bebbc98d1f79b185c5ff6c58442ddc2092547d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201141909.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-AMx7kTI2Z+t05rLYINl2HWhwXm37dE/ftXwuqd/R6p4lmAsO5KH/lm1UTaYQb/oZqo7YE7JjNvJ5ytYQF/EXnQ==","shasum":"bdb0e07d008c841325c5f5b480be5e0928ed1b97","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201141909.0.tgz","fileCount":29,"unpackedSize":1611202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4rxCCRA9TVsSAnZWagAA0GQQAJGpt86b4GjWP9SjC1Km\nZLPqSsiPptK+E6kk9PQxMC7DWUeTEWh8xw0GrtkuIWgUpu05RpV0egv3wyPi\nx2TOwgUP0XQbv3alqg/MOtLp4KhB6lVC1oB8/TbVHOw1Bg6B60pUSXyhNbsF\n62FNE6AYCP0gvvsMjjO+LAe9wdornvbCTCbC412A/Jkk0Ry+xxxoM/HMB79M\nCAHGMUW/T//gYtst2L6m84BIhIa/SpcBzbK35SFn7Ml7mmx3+79yJdOvN9hu\niSRc5qGatC9YOPVQySyQr9hHqO+OYwCntt6RDCNebb5Xm3CbN0gRlhc7goxS\nWYKuvA+Ugb7GZ9P7oiVjc315v/LubBsbesFla5oc2sx9BSt04e4HzKmCxJBI\nst7Goplo7BeS4xYu8kTHOBsLY66dG330oQnYkPzVkdFLYa1a1WErayQKj9bg\n4/W2kpl/1AnShoBwWQrUslP2H8rqZd7NHyQ/LDq16oqwxMcMZefDvavF7xVE\nAlLJa43/X9yQcT1allgsviMj8S8r9GkSaK2qKciQ/l7vk85pFwGDU2xoPTa7\nMAiCYfiT9g3uiyuOU+gEnKrhuuMVlyqazCdzU4N0eZD6kamgHMhveSWkI0NN\nZbXSKdaY0YFa1JdjKdBlBm3N/FDFuK+dMvwzeNpsbccOjja/cAgcXY6Hcq6R\nh4MP\r\n=4oOF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+7ZFqdUwJDMkPSJxsH80ISFoEMi4ebsa5vtDNEUkjGwIhAOF4Svw52KHpWaVy+rQFnR6KuECvqhQB8wB0Y3lnRjrB"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201141909.0_1642249281913_0.7046979348368312"},"_hasShrinkwrap":false},"1.2201141909.1":{"name":"@bentoproject/stream-gallery","version":"1.2201141909.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6474ad58b0a7e1997cf1472b09ba21af402b09fd","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201141909.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-hu7cOTV1zXLRs5hfUyzw//jI0md7r+HfSBdFc12Q1lmIpaFWiYk/nEB9kvDe5d8XxsQz8whlB2OUcSkFFFmDyw==","shasum":"9442bb77f9b347b1e14b8115a23ce18e60ee67f6","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201141909.1.tgz","fileCount":29,"unpackedSize":1600447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8FRjCRA9TVsSAnZWagAA0ckP/1BtUFYCl0hPneYD4EYj\nYfmx9lBaj8w5MMtVGnDHwG29pn9pkPwJPlqfZGzo2sGHYrqKNAzAkQpHkvh4\nkPI0YUbA8IybmIPw9stp9DA5aZLtkcD+Tp3jTkFZ5N5s7LpQrWoaRbPQcCkI\n0ZMSMp88jzScCCkOabAl8xKP+/V39KMcZh73wHX4yX73vFFqcgx93SOVVa59\nv5hq+e5IQWSp01k/SEHn+Pbzt3p2U5onpxBHDWOqFOuxVPQHQ5eFjahu261P\nvVvOuYkkutt/vfMY0/8FvkV4tpfrOcnyknKI0R37CRklzBNNu+rb4RMQY5Cj\nNbcUvHpt6WBq5KmzNiC5hRN9Xkcj//ojAO1aTEPLuNFEZByM2pr3WDatP7Sj\nDGSM/x1euQrmB+w7um4fatATn4ze3hOQLo4aSI64nesLKt9xUvgRh2HcvHeM\nxMTWN7zipjPBiH+YvWwu0D4a5pnxcBx1pjJ8MzLdhLAIJNLtrmZJ0nMZU0UA\nIBtf+gnzSdspP/GBfZ+NM0MH2tmt6iEWwBAsYpYBzu7yZ6AI43MAcuRxaRWt\nxjTNB7Gycn8bWyFTfthnMhb1cRFO/7XDMTOJVOQmP4xD0ItYR0fSHh3XWLEW\nmZsx4OvIRXhD38d5lhp7//rPykNsGCyo6Ixm/D62JuTL/ZyvYWRJ4fVFwMYV\nJq8i\r\n=wop4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEj/ZudOSVZKASlXtypoyQYa9HMcHYBwhuBYxLTqt1rNAiEA4LxSpKPxpISYXpdLBfklcg/zfWQHHI8m9hZaxWdYeGQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201141909.1_1643140195416_0.35039884161380797"},"_hasShrinkwrap":false},"1.2201141909.3":{"name":"@bentoproject/stream-gallery","version":"1.2201141909.3","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1edf4ae1e7a533868a19fad5b3b4da9917432bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201141909.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-x9Y0UxsJxUJRFq1Xf+EABxaTEWMTeHDbHhgGVEYakLqkaH3lvhoc0O9i5QaMMfjMGEtxjPIeDWlfot7qkOKErw==","shasum":"1e5f246c5d7dcc46959d07d92234388f8e0e713c","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201141909.3.tgz","fileCount":29,"unpackedSize":1602873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bYyCRA9TVsSAnZWagAArB4QAKJOpSx0I2nsqqS0Wf8B\nuxbS64WN/x5L8F+MyfT4dvN3GwVJJ+95soTWbE3dip/s8VOia8qt8eLffn+i\nsNjpUutaf2Mur5BtEZV+POTnLNkEetmbao0GVkygSQ+CnHNq28nioPusu2iE\nbTbDa+PKhGJG0/bWMuU0xZrlpedxgXVevDtstA4OT2CK19vA95cnp6ak5S5O\nytvJsYcRt4HrzLOq21Ptyp37s+pCMahETDlM0duKlE0GfBAzkwUFF9+cDM7L\ncJivLUmzk19R4D7SigxJGpyWD2kNKOPVXxopjTJPKkH75NUKMznwWk7F1SrN\nQfPLDgkkUBVRWLcJ8J7DjK8oWIKxLqbABWlD+QXmAcakG2iojLlI8b23QxAL\nz2EweUxUJOB2Ge783sAeGeOGiK/l2lAyefSxgp3tsG5Svaq9l2CuiWvrvexz\nNTkmaYbxWiDmwj0oDYYSDTwXpKFmteGPAWxZK3ym3V22DhgeIDLDOwe4zfXJ\n1N3bZg5PO4C+DRaY6UU+FZJJd7UpSgflu4porKLVS9RAoIS7VdslujXt0myE\npES0v+L4KZ8OhXw9cmbaUyA22p5SvysVWw68WxFZ3C7sadpiWLwRdP6P1X7x\n6hX1APVLdWJGf0By3Ngy/ktDusqy/VQyqM66rp7TZ3TCLGL7GQe4dmct2rD3\nc4B5\r\n=aCMM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5Dc1TU4MACEBw5BQKSCB46xqz31l5wxOGfTYb0510OAiEA4e/U/uN86reeDc5NcUsiclvBbo8kzoHGAsth7+yYwhk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201141909.3_1643230769963_0.9561267626685563"},"_hasShrinkwrap":false},"1.2201141909.4":{"name":"@bentoproject/stream-gallery","version":"1.2201141909.4","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6e60d79b180fd0983c9644d325b45bd569c6da2d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201141909.4","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-h6gOutuDdBsawsTsYwwj9fZqlSgkGMubgDqRJg4JWmT3f2Bz/XZbYYzXArAMGQpNrPUAWqRS2UjFzi0WI4FT8g==","shasum":"047ceb0a548478142a6946188b71cad30fd62d69","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201141909.4.tgz","fileCount":29,"unpackedSize":1603595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+aizCRA9TVsSAnZWagAAU8IQAJIYcK8cZCqwHOh1MBnd\na7j4MuTGqjIc6QPFUFzHPJI/8UpshaaCcdhb2G0fI/ucO4bootI5XAaR5RwN\na9DhUzFepYLmIs8phPBAEQZYDU1yJ5N+AfoJepLerSRP6I6k4JWj2+dY/zZ/\nE8qwGfe/+E8Xr4a7OyIlEHQamIW+fwLjM3mw8DSpOEkFgObR3rBXgQOLihM8\nchAdnkHsVonDX59e4pHGdvU81LngJ5giONcIYjfGz0pjLSwlnWEJaN/6EaKB\nh1nqNXQ9ec8mxNvy0KYDWzeJl6S3Fq9hUTDScBhNKLpQDlPQ+fnrlIfPZmkO\nrCU1jhETbLTlZY/U9KrfEvxdbUt9+gYDEUnk2yXnzLfdPbvI7hEyLtOW+Gzn\nAlRISqVceDJTIWj4Ql9bbF3Dj3V64IJda1Up2nMq0BzzNcScynIVySC+ZC8v\nALc043n7RTvKXCb/dhRtWP/+mV3iW/PMgf/OX+rk21rIVXeE1fILsMHEPbhV\nOabWgHqswc4k2ehebT0bg8BbbB/4G0s9Y1H79rhLOtm8Qb8Fv9CPEMU1Rk2B\nfVLlR+rA86ie2A4P96YhN10J1K2ShMswy+wBjKzmG1LXkZRFhvaD0hd/ezGn\n6BYiGq0N7XEV/28wqI2fe9Ae6i1y5hOX2zOzrBbg5sHqK//7EduCV60FpO+/\n81lC\r\n=kR6r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFg/zv1Zbitu0pbsGqKtxXZzIpQfPE+zMNXdVAOmcgTXAiEAsCY5qajOqmHxzqWVJWsE09+hGiDzqkQ9+vooqvrAqp4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201141909.4_1643751603390_0.2237846321647532"},"_hasShrinkwrap":false},"1.2201212122.3":{"name":"@bentoproject/stream-gallery","version":"1.2201212122.3","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"ca1c7d4b4b4a72f4913d7c304b5368187458574a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201212122.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-bDHt56mcJIjt810NJlp1xh+qbaoHrb2u+s0cKmSM3bbgwV2q3p63eRaR8XN5JiW63t5W9yzC9XrK2mgAwCiUSw==","shasum":"7d64c5634e5861848cc58121df7fa634c429aa94","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201212122.3.tgz","fileCount":29,"unpackedSize":1603595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+sakCRA9TVsSAnZWagAAXZwQAJiPSo1zkpfTyFU4/87C\niw7ShZ7gSrjXox1lHijPJUckh6/HiqGqlgr4QSGOHVer9fAh++aUb0U8MMbD\nRXbISbf2qGIG98Yk+Cdm4SFlXDCnjTIar1muXsKi1zsBl5a4x2oJuxTVQT/M\nvecrZnPc6yiG+cPlhqlfcS6JgK3s+ilQiUdOovJXHn2y2xhMooE4vBzuSgY6\n9yYH3WNmJvpEnvL2PJLpKhHnrFLhzDdxZm3yEjOozxRrYc6zMGQK0MYrQBom\nInesXBF8uhRnzUqDDLrAMnGlwqJXhYcbk2vP5KPFVxZb8OPh3aK5/oL8nI4r\nnDnDwWMWd/bqVqO6fRu3GRucgaY4kgqKiw6fYAqE2oJlhwpB1jXmB3fzVF49\n2Vnriy6caDWGs+lue+Jct+GaM8Rjfu701yl4Py1D6S4YNRrqkUrmWs16NA82\n3oFL67Sk9O5ToMIfFj7okQ6J04EI+xFmrJ5P+TZABGxxiJzAEjMmeuWeYq6a\nBgTCnzm6toAKS62AhOnWv2tS7WEMJ9BOaFuVUswhBLktDPGUqv51VHlA9QEm\nVWJ7WNSUbmt4UJQbf4lVur6zSEy3AVjXjTET/gJaJ76P9Yhv42sKlfmq3y9W\nuzVTz10olrZt9+XU4hoqZWIDqOtT9e3OPNyqf08G8HN1MtOU4pRkAigpPQA/\nfohF\r\n=ZyRd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNzw4FCbgumMCX8Ojo81E33zSy0ExuEE/2LrhBPguJDwIgNxl37gqD0mh/nLfDvqmzlyXJJQa33NbBFLaWehyKiLc="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201212122.3_1643824804794_0.045507992163181354"},"_hasShrinkwrap":false},"1.2202012258.0":{"name":"@bentoproject/stream-gallery","version":"1.2202012258.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"fb0c4a54446b5abfcc53d1d446f24370c05507c2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202012258.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-K/mYU7XIPIBbe11k+WZzfSAsZAUwa1CYz8rgx/oQtYHpJaYuelLLJl9MNqU0Bis10zVliJLyCu1EHqx3IvOF/Q==","shasum":"4575541b7e895bddcd63eef34d8fc42a27ec258b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202012258.0.tgz","fileCount":29,"unpackedSize":1603595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+tfgCRA9TVsSAnZWagAAQqgP/0nnmhPPpBVvR3sO4qOp\nLtQLFDeqNTGxP1cjR0Y7QFZpX+uRTri2o5MiYe9euVFg4O1toGPZk2jyplKd\n9xFMfS2CiuwyLV0qkh83r7R8pfW8nC+p978B4zxAcHVhaUVwegBlXBVeD6RY\nqcAJ7ESHvbM6RGal90qM8RBQ4nqlFyqFeCD5VTX+Ry0SedcKSDPB1msqheHU\nVwpWIGtrsVgreduJBhIY/KhYiGk62FTVS1JOjcqniBVYNyv8slYO6VA8Z3+9\n1k7lIql/qOQ4rj14xcKr7r72Nt+nOU2yuA3NcWpq6UF3r0jVX655mAHcXfDz\nd9dcmEcKDlZ8NR4eq/H0T4QqEyUZzu9q7EAMRU6G675rGkyk/8OTXjyCPrv1\nPezPFfBrjwMopiGe8LYY/g4nwNRn9W7NMKBLsW/SmibSeONvX9Ux4JaT6gJe\nADfhUyEcO1sPrFj+md8H4uGy3QetuF9TFGbJRpRFYQWnGmBxfMVt6DDHoZgR\njOJiYtJ1dXPqJll4NnwIaoNJQXNDMRgYZCH677IEOXtkWaTKfnHsCPAxfAIP\neJ4DiiL3vLJFEYtGcfK8klDstqhWTl1rikeWZihKStpzjPw2L3IerhAqexKp\njWJWh4sAnFrk9H17J82948ZxPhSuVUJM18p9n4eqWIyHxIrJli6YCIze7wd2\n1tAN\r\n=sYzo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHzdOnWKvOhtBDRt8jq3Nw8de0Ch3Yz+4FLhInrxb0UzAiEAvt//sLr5D5rlZ7myeh6NHAjzQP2XHuoLxldMvGJTdW8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202012258.0_1643829216146_0.12102663943499348"},"_hasShrinkwrap":false},"1.2202022130.0":{"name":"@bentoproject/stream-gallery","version":"1.2202022130.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"76b8fbdfc923fb90c4ecf4dededfbae0a5978ff5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202022130.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Ac6wlMFTVopfzwpDZKapbmWQBiIt4CuX9+vK3J02MOOIYWL400ivQEq68HiGADwJxNERJYc9BSu0uaZpbtq8qw==","shasum":"49e35a2cab3383f9cb65b8cf399b95f820fb849c","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202022130.0.tgz","fileCount":29,"unpackedSize":1603595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/AmCCRA9TVsSAnZWagAAUWUP/3zGivjJUwuZJdinM0U7\nOJq6cM7SpBecX15cCsayp1U8hMyulmHicf33mgdHTxGfCzud+9P53ofQBWG4\nM782+aGuOPuPOpbc7wzJ01gNTA0B8Re2Zq6dnI3hZHP/NRMb4vqrErqFcurP\nF798cUniKgfK+qKQZA2Ifs6oUl9Dg/kT+/RL6MOvKYaQ+Uw8ekluakf+wjT1\nt5KfW1j5jfWv7DGoNwqGXGwsG6SHoDvVhR9oJVTTfjycmYx6aMZ8y9eNiV5l\nyfy90s7cBD3IDdYBUyKIkQYKBJoLtAB8w2ndzZLQ2BTLXoXL8bvbHVgsLz9e\nS4vCGGoFmR2PLoFOk0pkr6LO0vRvCKRGshCNsGiGNaR4RmWQ/wj3kIs9HYMe\n1sg4kDmt6gydeycsTfxPBTHA2yLfsh/YPLxqcy+kyEXx/UcGzBuxgyDrA072\ncHIpUlKB+QFuVtdDvmVJR3hU8B71ZgfzrW+Bq/kQKQaGTSBehAvdlaiw0/SJ\nyymLm5rTWXWmyAvzUJY1ZRLvJRqv8nnzsM8UcJP3qEyInNkkDuKC07/pfubc\nfRuBdOKktTxW3GObdzaCgA+vcFDq5LqLOR2bCYhRbfpnO59K/AU8w/vNIqY5\nOKNn44bGflkMR8wS+Iuwy1BgBNp6Ewmb7x4+tize155Vz7bhfaY+nV4j+bu0\nL1zq\r\n=M0Ag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2ZwlfRe8GUXBZLIQL1lC5b2bFPzrffe0k0Gkuo9c8hgIgJTqK37/4qyUJKsfGCCb7KgAttOZkQKsPvqyxuKDSYF4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202022130.0_1643907458755_0.37352983139871765"},"_hasShrinkwrap":false},"1.2202031816.0":{"name":"@bentoproject/stream-gallery","version":"1.2202031816.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"b29dbd478c93a5298a18f8df14e6c1f5184879e3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202031816.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-MTrjpcT13IYXeTfEPy6mev0ZdC3q7hDrAGHkNgdm2CMCnHfMD3yHTTCTt1OndFvsZo2WRAmM0Bvkv1zIkTVCvw==","shasum":"8096b2d9583d9e42a5294c46c6a45c6a551ccefe","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202031816.0.tgz","fileCount":29,"unpackedSize":1603595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/UqFCRA9TVsSAnZWagAA8tEP/2HdCUuROZRZjie9Nnwl\nk0oMeqvBUFD08MYSYlDJZjjA9ZKrMSw4LYF9+UeGJcYUqcp4hYo6ds6vP3fm\nUcnhk5GeLcMz9aVuKFMbk0/dMLSYDDMXBZbSDo3xFvvpizbT2qlQ4NWqBn5l\nI9v5xsrl19+5eGB7XjUxMTvha8fOVNALGWBjWE0PPSL0xaavCFJBFg0iB9hS\nxilFStWdfpFq9jus8nS/TKtWRRwHKEy3nBLyuHmdrVn13bbzTU1gJkkiIJDT\na6nqcDAIL5kGe1yWlrLreC2zlrWUjIaQrefEnECHJpznIrm+GxV+0qEC79L4\neVj6lN7Z52LQ9gTfmpGdIV0xqc1FiLb951R0ig+LktgrbNrI/gsFWvgEe6WT\nOZ5eFZtWFjmDn1zVZftFFKKhxF9NyhuyW5tFxLmtyIXuMdu6eyn6UDFhtlBN\nKWZ86KIADZAveh/OZpoiB9PY2rnPeLyhSrzElF6kgRp0fA7/eHnne02DXRaC\n3HrpmRzocyqw08e0W9p2jY6GGHYYf9I/zu+k3erKJ5WiOe+nrAhgIQqWRriC\nRn8DTG+yWKdWwzhwKOcT03oeYpOs8IgR0vbyVigQldA7XUgNBi2/HbMsAew5\nf3o8WCja4g+3vTPD9LTEk8LRpA1npkAHUXdqk9ARM20kE+9/IBoS693mzDV2\nW//u\r\n=oFBV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpzZqer2u0RkvitlhTlYlDnsXm0i58HAbwBlKOW4wFcAiB/k6kHz4nuMkRzAa06gQ67RDCR9rfmpDX22xkrsX6zgg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202031816.0_1643989637241_0.7761052390549996"},"_hasShrinkwrap":false},"1.2202042210.0":{"name":"@bentoproject/stream-gallery","version":"1.2202042210.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"04d031e10759f2ab3f4a10cacd2b776e3de93812","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202042210.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-wFaPF1CWUitUgOU5yDQ+8dRD+PyitTBhjCGy3hFk9D8fcnEYmYttgbaRAG2kyasukjsTd7IhXiMWtQ0WRmDE0g==","shasum":"56b4cab978d8008c615df28a94ef68a8c74042dd","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202042210.0.tgz","fileCount":29,"unpackedSize":1604839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/kFSCRA9TVsSAnZWagAAp3QP+QF6YK/N7Hd7dkpcq2Hr\nPPXrpgtC21dRrVcHjVHKGfudn2Y+y4tW3sYQy74ww2UZo824uLw0EOQVy7Sk\ny2XSft2sKiq+sMmaHHiF4Nl7FkSTYzkqlHbt7mNz+1nBq5i1wJA3EyBuON7d\nqBNbOlZFZeh7t6TMkpdEXxDzhghLfqJuLOKhUJJVuiZ6/ovrpdYpin700EVZ\nXR/uRm8OmK5QFkkKF2g+0DxAC32xvG8F6m3YZVz7lgHF1eYyYjGH4bYwgub9\nFx6e5sUr61HQ5qDGy8DxooP8g69JKMbXGvUJ09u8Io9LAQ5225VBVrpYLRCL\nN/Z409VuLHAcfe32Zvu41gjerMmI7pnYEA445TEuZMitkf9QJgqOTCrnLnuP\nCXFGJxQyereNzDtQ/vV1cdS/s2EOrA91Q6io/btlH4jlupM14Gqka+ihffsV\nDVfls49sm+TgwLH/ADqnJ1GgklzR0uIQI/4HPip45/24I3+vTbKdNgEgJ6Zv\nu6oJQVc6HCpOJJv2u4lsQldI64O+CAMu5HkweHwpjLEPZTm4m3LOGVm3UGPP\nB0uyvVJy0bppuGLl7XR7xlK5vyXGfY9qBjG3ASZBCezaO8REtw/iFcITPj6b\n0UxT30dWWjjSqYgvAJshsTEwAHscFzOXCzba2cUpkFQbREijeMTuEpS2Wb8z\n0bCH\r\n=LSlp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/gnrRl+luK5jxQ0BIMMPHbLtfYckscB44hEcWO9TkGAiEA2UaDAqzuwOvHW7XvmCxMGwTM5gQMhL3PRRbfzyqWKjg="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202042210.0_1644052818224_0.9145205825178078"},"_hasShrinkwrap":false},"1.2202072236.0":{"name":"@bentoproject/stream-gallery","version":"1.2202072236.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"1d8443e81e44defe1ab915032668da75884187d8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202072236.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-K4EbEZYrL89OYWP94S3Zuhx3iu9QcbNd5AmDPFd29tuJG6dHH+vjfzD4SN1GiDmxrIPRWDm+1AL7FCUW93YgZw==","shasum":"b5787f7c08c46fdbf7abeb5b66cd7d6ffa1555f5","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202072236.0.tgz","fileCount":29,"unpackedSize":1604839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjXbCRA9TVsSAnZWagAA6NIP/2LAD3mrLJ7BZvxPTb7b\nhxwmiutlk7/R/yK6THHOAE1BSMKCAePp6m9tiWZ7k/Z43CKK+YIt+3/1H4n3\nHOmCCVPbSnfV6PfB1znIxXTaSWPWAXwb0pX1AiybQqyDMG90yq2oEcJgZsnF\nM7U4jnMsoaRLjzj17Vp3FD28S2F6aiWRa76PDudiCR7TM8T9+0CAPljiLuU8\nlwkurMtspoUYlBJGT1UCRGGBhi8TmmEOEOw53htomCEI+9NE0dl1rHC1UktV\n+DTVJBSrl87NSt79tBSmmSuvqyYRoHmm8J9tUMPWST3F4HQPn2/ev85pewsn\npb7ytnH3BsUpdmHM/4ETG7GsekZ/HmL6lmFFIzH+es33AejkvX8e+nW1kwWL\nRKj3zBRcNQuzUYmnZEfwZd594qsUZVNpUgZrCp7ZRoOQOZJmXpCoi/FOVGu6\nh18yGFq+toqgPSxVn6tE1ZRcd95mcJljzzWLFZSz/QStktpXXRuACBOchS2W\nQyjZIgg4UX6XfmEnI1fz8mkv+15MNfGmttSfwk3ey6c63i/WyNHpz1SPFZYu\n5f7dGtlO5CXrwloSbWdNXB+gtpXcFLGU5jWCe14oXl3qDWFTsO8ZtWu8a+lG\nelEvxxW/j7w7gyodVe7z7kUcWvZtxsBxOSV0liMHxmB7zfT/q9LBeGeBOawu\nIk/g\r\n=PwXG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDXe9oTst7S7Zc4/CaOE06ag2w/Z1AAbEGXn9r6ZC/ViAiEAkGpMet/uTGatFArVMM8AgxCUiH/4e6mqxHpjTx/PPX4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202072236.0_1644312027085_0.8329528162962425"},"_hasShrinkwrap":false},"1.2201262038.1":{"name":"@bentoproject/stream-gallery","version":"1.2201262038.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"cb2af7d382510037805d85242e3f21a88654a20b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2201262038.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-moOdnaYVEGDhtivF5WCrLK1CS2nB2wdP/lalHOwj1M1gER2ZQNOk5+EIr3XrQ576PUO3eHjtg+Ky8VpLx93ckQ==","shasum":"b3c4a8a39380132fafcab58f961d9fe177d9b194","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2201262038.1.tgz","fileCount":30,"unpackedSize":1611119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAt1xCRA9TVsSAnZWagAACOUP/1CyUdXrixvvftCUZZuR\n3JxBSegKbqH57FofrRuq9Ayl5jOD5lP4lk4V7VFVWADcJCqhCIaYan03Wda+\n5Rayc2aXUrN523lbp00R7+Hp0tW0Czve7u+D/qM/wg+b+lmvHHSrZ/kpD9mQ\nFfS1o9/AeqjgNDw8PgJ2mWHS41eaKrhOhiRe75Ko55QTFzEL905DqMKFS1Q2\nm01llOj1F+k2i5pk8OpxxdSzDl6xhnNMMcpAbHuZAwtKMrpoEk8+5JsVVoK7\nVLdHE1QGkY0II4taR34I1y7aDmoP3Kocwn4GdEhFF6/wlKA6P1e5xZgrqJ2T\nDuJplqvs2/9mLHlx5rSjRvbUXTbx68Inzxu69P7IoMEHYw7eDBEVYurP6ddp\nG7MfrdC+Vy7tq7Tzr4C/NsRIlRXslJJhUgg94ynC6IuwTRpezLE3tJ+gNXO5\n+coLKdnCKSVbbN/HkCIYN1l95er1sqvpz32nzl1tRM+JE0SxL3Q4keLKuSwG\n4ASAPdECJpUp5XZM5apur5fds7499Lfx00eJ0d3+MQQGgflz0PYQ0oGTb9Q8\nvOqWdTGMMZTpcV0THcx9Hezj/bnplPReEHpQTGszrGVgdik+knvi6gKzTkgs\nfxUVR7B8MZ9NhzwbcGo1tB1lfFiWx0/rBUXZYHNXhAXx5wS0LwqfavIfB8qq\nEbzT\r\n=GbQX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBKXPyN3htch2zTI82kQvdFbyrxs7fU+EAPW3iu8OHdcAiBqQJ4AxNMfuMvPWm2wDlAdMcKUBxVKiMS34lZ+tOd6Kg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2201262038.1_1644354928996_0.17542100325413723"},"_hasShrinkwrap":false},"1.2202082004.0":{"name":"@bentoproject/stream-gallery","version":"1.2202082004.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"572ca92abd38a7a42e381c556e12e2d929f26802","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202082004.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-r5DCooczq9IUPxTZDMMFoeOqReUrB4E90wh0I2ZxeQ1Ji5Yg3Cxk0zyQev+uk1cA6b7v6EnZr0gAGck93nNJIQ==","shasum":"487da312c1fe651fbda4126b8bfbf640ac3a79d5","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202082004.0.tgz","fileCount":30,"unpackedSize":1611119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBD1rCRA9TVsSAnZWagAAP6wP+wS+MeBJeMoqg66fgFng\nqT6fQB27OOzf0MUzPChEuZynXRkyaWz8MtshRWbJK2GyatlNaQu4EWU295Q0\nA4bg93aaM+pYLRZhJQMOBu0wfyVcbTjmHrU4arFmB4+1yMscFGDoZCcBR4w7\nufG0Gy2jCrTlagDfVDYQSSu/X6Izx7DrI26w5E0y3bfKp+OXjokTTw4fwn1d\nLf+k2AqR75siBTuMsUS6ovRl7Gv1rXJZU+Y2j+dnjF7UV191hn/4tI+y7o51\n1IaqkrvUS7qc2bfkvflGuRHI+VBEp9JL5GaTDHWFM2TrOizpGYeMNnf45pnS\ngxJjkbwbQzncw6LZd86C5h8Rk3b+MwNRnEHPgPiWkcz6i4QSWZkzIYn16zbm\nBVKbcgofr1lZoBUQowGkUVXp5KFNYLPoL6pin6LmhF2L4ixA/zoKikaNCfxg\nCbD2gT4UMnM0m0U0X/RdsqSc10Y7d8k7ZwT++C+xjXvEf7N4aPB1dvegCXAl\nZnRRXkpsDhtgp/2oPGgauvbcuXNpjbh3+G6eSczKa7NWNTzpBjgxiTcJJFSf\n9lj8C0IvE+qaL6Wsu+Z/IIBSYuVv/f9hNMLvG8J73C53bDLF0PHgpmlqKeCR\nOzUuYmXGP+msuNKAt8QH3f3Ro47KCe35g0WIWuAyGon7QeSnKGJ9OzuzuEGe\nZ1F3\r\n=q7NK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcJTGJ16c10Qw0b7qpDg9RzQIy2zLKkVTGfnFkhyUDGQIhALCHrbtLnZ2e1+xZuv6TU/yvO6p7ksvmZIFI6MlWXbwp"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202082004.0_1644445034954_0.9226465727933006"},"_hasShrinkwrap":false},"1.2202092050.0":{"name":"@bentoproject/stream-gallery","version":"1.2202092050.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"37b830a030b935fcd922e108d5afe28be61d68c7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202092050.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-hW909VDIpTbV6uEi21qEunZg72BbpuQo8FhYYYIpLuBrpT6DOqlNP0gi/fVy3MVlJvSqme7nj8lScgdbiBqNZQ==","shasum":"9cb6120a0595d809b70ca1116635bc7d2b9ae3f3","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202092050.0.tgz","fileCount":30,"unpackedSize":1611119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBVJ2CRA9TVsSAnZWagAAXzYP/iEX0V3W5l7oFY/QGKbQ\nEvFVZLX98lmJbP0MER+BxSwsi/b6LMB+lmIkyTML40toPBpzYpaugqlH2uCF\nXDIao3HLFyjVGMvBZpfm/j+J/C+kC6Kj8JXBz0wZVhpm7WsZ0Ex33cm3SjqT\nUyJQY3GxSJNC/Nv/giY0nSX/TpPM8kYa7x17C3sglKRkFaUxN+0anRtXIRCy\nbvH/9oEtJve/FAPhxg0g07rpKxEZtFizGykLsR4N0Hj3rrzsBQpCjIyAh7RG\n14i6oEOQXlbpENjBFdlNsbpPqAXF4EXLHLagTRr9cHyx/BS0cXBiGtGNp/Kh\ndNGAm6EoLsGNIt7VoPe6VWTaWOLYXBoWiZ2hYLnmBh+n3NOSXtRF0v8CMKUI\nAiz5+FKUdA3yWIIcNF6b2PosdrYduaN7s2sb14xepjG7B2qWGg2vE4TtqJiw\nQvqOhR+rWENAJjtDxqnGrQOo670i8ycZkwRjkSalERJigzHHh25c1Lk5R9dc\nfArNJTEBkPyTLMD9Pr7DaZ5fSloGMIZXxTWnyNb8ujHQx76O6XYQeZSpuG13\nypHV8vmt3xSYVGRAWwiyAvLQix7LcVSK9eIQBiXKri0GSncGR2rrYmdc9yRN\nkAtuDU/fzQRKLtGSQBUdAH7lTLejlCN+ReMsuXO6MOiKNFwLc8cKp3vcqcqL\nl6Bh\r\n=nfio\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICHuAczWovJQyO0FBToGMib+4kAW+etyphq6PvRyhcadAiBZYBWuyZuN+RUz3Mg6ifUfYzA+bjmTK76F/zKZ+u6qRQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202092050.0_1644515958366_0.7461474519709677"},"_hasShrinkwrap":false},"1.2202112230.0":{"name":"@bentoproject/stream-gallery","version":"1.2202112230.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"42cc51fbf53c86e33b0a12004dfe9c35b8f5d0fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202112230.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-JGTk37fnmoUFVC51p6XJRuJqIddXLWX754Je8IBYV7HbL+tTO5HFPlrSLi7d3Avxw3+H0db5hVKWQAMzXZQnbg==","shasum":"b11b470e5c648534e55e3c145c022a92f823479c","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202112230.0.tgz","fileCount":30,"unpackedSize":1608093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCsSuCRA9TVsSAnZWagAA+pwQAJuB+VNuF2f9LX7ABnso\n0Of7ORBVHPa3NV49o1zarZhTsO4dcz14H0zDFzqzkljivFYwjYGZr/RiQ9DJ\nHx3Fwi01GJhIxo+2tJIAIukFQ/9y21vTzXNFOEEcpAFBROua2AWTD1S65qIR\nDN2YoZ5lTEkZNGCXxyVAuEQgmDzm7qGewZR6AC0tn9t/Zpf74/XB15PLxaUE\n8qKNsAhEu7UA8XEYubgkbB/jyCAvjYFrHz9YZiX0aiVX9W1ftLLoa9yOJy6c\nTq9BvHIx7TYAosy2Rm3sI/DjMRHzLta9RdSnaL9gDExsWzD2MlOfYJnhRkU8\nxB6p1cZ98kn2BKCjAmAeMCYK3ceZzf7EllH0315+b5gYqypk+k7sU6fggxrl\n3WQNhCCToHvdjbpTHGy2IolR7XEUvxjqvTs0dmYT9rEL1ThShFHOd+qC35su\nkeYTwvW7Q653VEXeqK/l7wnBxgfpLqcY4KPyZiAbWVnzRGc923vfhaYD8ZiH\nMIXLp+WblvC0eu62M5+OxxA40NyLQGny68Lc5lNOIv0JnGxsQH9lfVfprRUT\nwtaasxOVpYvZO2Mm9jXgbn165r9UumRCZXn1z3lb9g2T7dhb8/wI8mfdHzmN\n1I4NlLAkFi3N1d6rnXUBOtJS49M+3BlwAd1n2rZ025oaPU6sjH5T87eFsXdV\nZosr\r\n=BJAa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGktIAW13RHfzbLT5QHW0tFdSOTzU4BbxkY96fs/Be2eAiEAp7JZTSWpgxqBxf3CSpMbYRvpGpL+mUALK2znfQlb83s="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202112230.0_1644872877769_0.8768153765018005"},"_hasShrinkwrap":false},"1.2202142035.0":{"name":"@bentoproject/stream-gallery","version":"1.2202142035.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"4bb5570c3d04ec8e2a88418e8ed8b420e5b31ce2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202142035.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-a8p0f2xvX+vGHfIzRPAIH9qJGsjC70/1lZW+rcSiAKJnPE8xqtFxGgtTmqkuMDRYpPgkNh+D/PU4GZkvmgnqHA==","shasum":"7eced90e1dda23febf71da4e58e051873b12f1d3","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202142035.0.tgz","fileCount":30,"unpackedSize":1608093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3IJCRA9TVsSAnZWagAAFeQP/j7esSLAOWYN1cl2ycFl\ng85TjyplsjKUbO4HC1qGQiXZVvriOswRWn9ojvptN5xlmOd8sgI920AxxfLz\nbmv5TdWJcZdupdq1q8MXx+Xsjg0XUw/jF8fImmd8/16EPGwPA6eqctRdHOb2\nGmYdj4crZ47kiyd0xiogkPefuLkhnmCCGH519nTeEHt+U/+gXDSGVXnCIHr0\nL1GfqXcoxXdHytW22hPdbiosrkKs/MXahgDoYLs2pw+rUcKjH+ohF/+UUPcx\nrqFivTs/s90QzqLV7XzFI7A6uoaMeyrhGSLbE0HirajpYa/VlVPzjlLfXV/n\n/atY7h4UyYSLf9dw+jVtoRqpxP1QKqIKhl2yQ9ZqUxWAFpaSRz0ood0Mfv9c\nhejbgGo905Xm+SgD+GBlMDvnKM7GYQfs5Y8YpdM740f9WdfAVRd1ATHVuTyl\nR24Sn33XfjV8HKSu35siFIPYriLAunfpEG3G2RXK4+jpYF/Co14/ubDJJgt1\n5mIb6ftXOrEE7dHS9AJ3vKSRB0Mgy8Z2XE/XHjbKXsCdyh7DxhT9K1ooR1jC\n+p0U2VGqWFjAcq8S37iZY0MZnqKE2hON8QI05IMAnrDZnBb++KPhU2hxlBnX\nja7K6j4CDApqaVfvDtCkbJAsJE3rZ2wm9Sx1/iQuhuC4tq/C8+YUU0VP4RxM\nmr09\r\n=as7A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7oJXidjla3fXHkjqSy/wyPbGdTAEnnH2kvbBgzf0CHAiAYdxySibnRMPn+0iqW15t3CMoKODSw368yrV2xh56luA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202142035.0_1644917257406_0.4586408519276184"},"_hasShrinkwrap":false},"1.2202042210.1":{"name":"@bentoproject/stream-gallery","version":"1.2202042210.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"a656b221ffc7e0c9f092bede5668a546628e9512","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202042210.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ufYmxtf/vqoi/Zh35Ui7jqJrffZ6lTWP4S1qN54b+NE+5EzT4cM5yI9QsiXlL36ZDkF/v7yWOUEdmxE6f73FAg==","shasum":"5ce7ae810d792b524dbe61c5222fce07cdf85662","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202042210.1.tgz","fileCount":30,"unpackedSize":1610467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC/AwCRA9TVsSAnZWagAA+soP+wRUOj6ejuPkn2gLSjKk\n+5oYT30rf7wCJeMIA4WUneciXyudKm27/n5zUXJdtRF5lB4aj4zTjW7mTORF\n67R46tIC1sK20ZIRu9ZdViLong+ht7FXzWQUQm8n0Ok04S7Joxhf7uzPv40R\nm4jtrzP7fO2idvA8tKKwypKyt1N1gYk8mXzePZs5HsD7/YI3AzFgYqs4gGsv\nYRd0Nkg26t90XmBu6dUytuimUco8yCW/VDkIO3GC9m4Hap7xrIakVootUNPO\nnYXjmaUUWNR1oK9xtI8wrER9WAPSQKFRZ4rY8xbqmnQWH94J2VsuLurSkYAI\n2QsGG/r9qM+1gQLev9ttRrdY1bt1OqIWtW50LoSa0zSn14Sh4oM8YVSYtnV1\nKcnRAliI7nfGlL5AsXFKvyEJ4y+w9+A253/79xEoFHUFYKPDbrlKff4aJJ4Y\nrfSWXAnxr9TetYqy/rcCGW3lMKvKK0DIYJsrEh+LwYAE6hojDDS5dGHxAyQv\nKyheKHQcGTN/n5tTQlvScpPp+pKSKNlFlKpw7Ag04rd8fThJaZKtIfUGFUZ1\nILQTXxUcD1tQSeZsT4B2LcZ+HkQs9UiXuukmTy8HUGG4kGo2FgRuZmQikl+u\n86HLsNzoW6F7dLaQBZiNp9afsSy1vxjqiYXBEbIb3rerceHKk5KShSVi2hyn\n6HTb\r\n=SrB8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXt66oT5alR2AtfjXfUQoivvNF2/S6CywTh4wfhXOZ0wIgb7T8eYWWGQ09i0Mv6pYHAICdTqa7WCnH8t44WH8P2A0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202042210.1_1644949552053_0.25323286547084023"},"_hasShrinkwrap":false},"1.2202152253.0":{"name":"@bentoproject/stream-gallery","version":"1.2202152253.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"a50f1711cb8aecae95387e7f6b1fd1862206166b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202152253.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-SjAQ7dzK7Us+gFe8lyOBwyhXMjT56Kf3qbq+dheW53R0x+p50MBx6GMEZcyEapdgSDvbXVYIjx6sikOQI5qqwg==","shasum":"abbfb29f4a495a3a2fe13f353c4f2205d62ba8b0","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202152253.0.tgz","fileCount":30,"unpackedSize":1611867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL+UCRA9TVsSAnZWagAAjkEQAJGJ43wJGaxeS6qcDJYM\nFixqdbieuQ546JfVMoynYmmwDnNhviF9o3owTc22/2c6M3is8JQqUW+mJVfd\n5oc9Ey0Cn/mrYmAJmde5ER9oSNimB0EKi3WlJsWHaD0GLCKHTt7iUckJhA3L\n9XteikP/TPH17yI8BfRNc9+WoPUwWR1w5i+RCEWPgZpT/+yq1cwEZQXLpPYU\nrPfHr3NPG7eXZF7Q68wHt++TdbVgfRQCYvjDzzddKtGvuuC03CyTiix5YQzV\nXpb+Ox7nhGpyK8Wb+x7nMd1xim9HaTFLf4uED3koPJkckp/0G6sgE5cZJmR3\nFX5F7oyNJKH2gA5GF0wURSNJIzm6Z1IblZJsipYziP+f/7N3d9TmNc1p8jkJ\nSI+G3zN3KJe2mmpY+Y/ysSq6Vlx3op/vZWppiCc4pmuEgR/Zg8m339Y2BoAY\nqMdevYO03smhrL3pcc3Bfwo036Mt6h1LbdchfFq3xpFRakEJBIHkLfgzcHvS\nIsiWfKLa4XuSDIE6Lpkeuxj7y2dJGKsF+1RNUGxOHQhUdqIIKSloCxBvvCmf\neK1DxAM7W8CC4DzikR5ykkfHgHpoNnZOjOBSNt1Ir7xLdzbkYHkRJPAotOu3\nDm7vcGqf7B3QwhqCL68EqMtaFaVsHU2MKkk8VlEvtmwGNKjEzRwKAsi+9utW\njsqa\r\n=2RoY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0IX+cYmN+/qEFptDuQ/mJfz5s/brvyno6Q2QOaVj1lAiAW/6spPccKABgTc38PsMdwGMKEIgu4t5EN1QUoWgQ8Dw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202152253.0_1645002643874_0.49584424996102316"},"_hasShrinkwrap":false},"1.2202162256.0":{"name":"@bentoproject/stream-gallery","version":"1.2202162256.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"7548b64f77fe070829e46481b6fa247b8813958a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202162256.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-24Q+RLPqOwJXq85QP/3I3d2nPsUn4CNRqTkcqi7L606ptK4KOS4cJuCNjRcQmhPAqH62yTTmBL12+FII5my52Q==","shasum":"882041b7663cd3cba40e97f251934cc9836d4f8e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202162256.0.tgz","fileCount":30,"unpackedSize":1611867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhWdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxZhAAlKjlabXtLLfTAhb5SEIW8rZKS3D1AJ07sOMMjuPFVAEkUvN5\r\nPe7GZDEe+xMfQpQAPIii5oHGULitWyJhppJCe4mPf/rPvIR5L3Us8GYKBTu8\r\na/wma0JkwhsettJRgUS61vBKcGYeC1R+LVM+/yiPnz+5ZAZdQvnLp1f3Fvhm\r\n8DOVn5x7UKoSHjaaruyaGtvkESP9AcyIVyGjqVCmHTJuhvTC/BPOYbAW5KeR\r\nQu+IE4xNYypXtPMW76cerjQc/jR/0WdDT+NXOeN8xJctj7bbO5aJrZRGSi55\r\nyapW0xYV8EqCq4YFhCx0CbIb6gS5NuLE8Ml63p0sho7plY2T9Ibnygk2DsFz\r\nW11lbwbgfjSzfRsuxCG5sKoGVP5J/+3oWvU/YrHFho/LMXLRNCVcNpYL9kDB\r\nBJFfrxVjHVdSAVEc3737VLm79t9xV11XfILnzii8vnx7ph9YIwqSaLMXdLp3\r\nOwmmDmjKSWtjvE8tZmnpVhjjwCIdq5j++0Mf6FY2prHUgail/bT0XmV1u1nf\r\nVq6Wpgvcc+ceTel5Waq9hsFpHH9MxI0o6oDbq+abosnQoCqzYJex0aGWHSfe\r\nydFyM2H6olI3b5TT1YFrfxbXJ+2JHW2CcBWmVhRqz9g1z5Uvh/y/IOLW4cFK\r\nBHBWz2KnLzIY8gWTEqcXC1maveJnWN5PhSg=\r\n=Oo64\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCD+d40hlXKnMuniQHJw+hEgOSbyBE+AFA3bZvL++Jy5AIfD7JzDO6V6Ka+rjC0Qj7MmY4X2sdLJINgGmT5AkCXRA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202162256.0_1645090205532_0.09443785426463869"},"_hasShrinkwrap":false},"1.2202180255.0":{"name":"@bentoproject/stream-gallery","version":"1.2202180255.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"8708c2591965df37c54fa25ae829421f10de58aa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202180255.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-EycnPbilp7p2+mpdCDhK6/HkyJoUbAyBCVxWE8UxPq/66hvBZx8hl3ThZsIr/WoKJ0bjkqG6XQj18HDSSkXWSA==","shasum":"2c6e1c69970a47df1a95e8f80303264ba3403d66","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202180255.0.tgz","fileCount":30,"unpackedSize":2870535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD2qwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrAw//aWQdKiY6yESn8uYJLfiW8Ti9T3B+PSBrqbn7SEW7PhfD1EO7\r\nBWbqrHx6R28jW926izM9YteWeLZfoc0cHXk3Xr4rMs5dFF6lSPSlKs+Y8Jq/\r\nyT90TFFKzKplHZCMW1rcYnDgQcJo/sUb37zgnlnsJDeusAEmVY67aS3hHULE\r\nxVpYwFT1ZIYC9KCR4atgpPqWUZAjZhBkxI5Px9XqTre/orCV6D0h+q1vvVWB\r\nKCH3CNPWv6D3xpfS+MkW1w7882RGeFNCxoVVhQkSRZ/frdQ7h3YEqPNhUHwe\r\n6mMQvQcKEBcIknjNIi5EcncJyjXCt+j1f9R6dRkX4aksnddUCEXRRBmKWzDR\r\n3FNOPwGEVvrtLZguFCo6Adud59qEb89T+jp1Llc3lEiaQ2xlAr0VThWG8wb/\r\nYzqP/p0hS5dpfAU6hU66r1c7A85+AXIhg7Lr+VVPa6rgEMBZWk0EAd/T+7dL\r\nkyREfGH5Y0se3r82RS2hdBTfgimN9r0Al3RfLsbsxSIaVcYSSVcBZBA5910r\r\njr/6FJY7DXy/ukmsBkQmM3bx9qx82i0nQ0TZ1sLnjbZ+8eN5+HLKrIT2qSHq\r\nQz/o+eecL3ew2e5CYi71yEcdx36xAMqTK6JNPM4ZjmSaPlgSgv+0y0q+dkQ6\r\nD8WjdpPs07xBaXyiFYp+AVtGyySRDqr083E=\r\n=B6vm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2rLb4y0MeEH6h00rZqRkVW69W9hOlm5LdV5syQCZ1/AiA8xBwJE76ZvzQz6AIeL3WW/jY/l+1iSGNptKmIw5/r7g=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202180255.0_1645177520081_0.8743340087776581"},"_hasShrinkwrap":false},"1.2202230359.0":{"name":"@bentoproject/stream-gallery","version":"1.2202230359.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"02e5f5f51d0375b35a2a20b27815ab79d9767e51","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202230359.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-tYhb9oxP93erJDmV8hNPNsNqVXBxaTYZ5oIablE5RKtfHRojJcWv4N4c2da302xAw1cYPa1Ldo9tHpa5+TzfHQ==","shasum":"f77868647d097a5e8db5220e7711766371407141","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202230359.0.tgz","fileCount":30,"unpackedSize":2871073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFf6vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE1w//cfkjG80082T0opXWWge8UoNCBDlfmVq+c7SUOYrJXKKufvOU\r\nIGNZqsyUBehE3Cfv5dJ1Vn+50J41j6q/HgAaS0blVP9RN8rx7vqOj0BgJuBO\r\nq0nf2YMpX1FVJLlL0sQla1HnXphCTzQmDUIiOC4AcMlctaIw14YKZAXcmq7q\r\ni1CPGWdfDxuL2OgdROoziVrwFiPlejKYsd7Rjm2LFoMExBVjeXogYdqRQ2Ht\r\nFD/EP4K8TSCwF8In/PTENTmKLk9NVN15OU6k8IANw/fCr7UC+vtTOrV5XDdF\r\nFo1cO0ZyeuPOECv8UZeugg31+cDsXDBVwJq4YJkCBzPSIX+kdJpSj/mkGvrc\r\nXptQdepMbkpl5GkyOJJYrNSaQHujVIvz9yBTftJM38ZHcyP8QIf16w21y64N\r\nghfKIbysz8RyDjmSMaGKi3oZXXpgIrT9CAQak3ImSPRcwu9bQ0XRDm/Gr7C9\r\nwRp0XFaGwBa3C780HMTH8BXQIB5StFqbB8zQpS3pG5NPqnMeQDRjByIvNfyS\r\nukTLVPPhy4oP5vJGQY62q80QGkRCQRFekX0sQb7v48b+P+U0Iwb2+134zGeV\r\nfLWp0aVeLH93U0o6RosYwqGVPMvW0H5jjYIF0s7yeVT/6bYGvB40J3qgveNG\r\n+n+CYoZcRzPGs3iLOXLb0akvfZLmEXrmJow=\r\n=rTng\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdERqwR2Aokql2F/m1jFG4gM/D9s2M4j2wKL6JuykFGQIgCzWTyacNRiGs2/P1lq2xrpg90h2xFDtbnBDZMv6MTbM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202230359.0_1645608623392_0.725877409859802"},"_hasShrinkwrap":false},"1.2202232232.0":{"name":"@bentoproject/stream-gallery","version":"1.2202232232.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"66c8923bb334f4cf267bf8feebf822629a9129ac","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202232232.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-QCDhSW1r7QSzUPAfzue1SoKj4Gs34Vhw5gV3vWTsw989zTRbQ2xpd9eg6ux3MAZKp2PwczVPBPehLyHfUf7WNQ==","shasum":"61dae96fd8116fcea06ce351a4655382b8086edb","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202232232.0.tgz","fileCount":30,"unpackedSize":2871751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF6LgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplxQ/8CWnNuRIYVggwtnrcXwLhPnaCZfq7U3X5pdkmYhcaq0Q0gQJv\r\nquiS9/j/AacdcfqrHyvZUF/MWxVfePiThSkvNaBQdqSUIrZxdSJNIE8z01bD\r\nHcOotja8YkdbXX7CleD3m0+/bJnrDcz1O3dxm6dmTr3ETupC6zilDsX9ghz1\r\nR966oSyRfzu5l7FUp03PwyGt7kgVCz1MDcZa6e1AQa/l44eiMrmqVeD4kbkw\r\nvNIAAG+dVXtSp6yv6D1bXmz+nn6a8QDQYzwo/m2A7WzUbdF2+dt0f3s7nk+A\r\nCXf7FRHlXO4Wqqg11JS9216piBuXq2DANw4XmLesoOnjfrOiSdj+k01aLky+\r\n7QCQD9TEds91DH3mPiFu+RhBWlI4vzaB40yZIWNpgdsxhcMpHzSIDuhw2Pdj\r\nGsAxZJO39DL0VdRpT7jK2dd2I/4jMlA3ybALOLEY8UsEI8fqk9gRT15XAXse\r\nryqz6T78acuhYEHbrb8N9ISHa/KhamdpNu+ECwg1nCnRP2t1qTWjaWnLFhYx\r\nXMsP/E+2NE1hfA4meml5Om+M3WgW9EPYAPSn3GamThaxcb1CdkAgV3Bfu70x\r\nxFgWKByIXdACtRP9PiImFIgfvr47agzyZJoiBqddvPfkvbkljT/RgdWe2X20\r\nuW9v7MGIWddddjLrh+mQk7TfeZCGi1pJv7o=\r\n=L1gF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2cLIiB8yqFIxstfLtGFFkZgCW7G/lKNCTU7uWhWuRZAiBWqA5q5qUHGQ8hGUJTKf0TanDu3OIL/cs+IP3u66oT/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/stream-gallery_1.2202232232.0_1645716192536_0.2807705197627721"},"_hasShrinkwrap":false},"1.2202241911.0":{"name":"@bentoproject/stream-gallery","version":"1.2202241911.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"d0f22f13b53d3b67847e18749e07ae4640258f87","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202241911.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-dNyD8CRLYuq3fPoh8potRFo1sVOSY+MgaiTwPbityLNLwKwPQqxM3lGX+PPoNAiFH9Cv0YmCTmpyid2umSUfRg==","shasum":"ee573493c342c8be2c5bc25488b23cce9b952116","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202241911.0.tgz","fileCount":30,"unpackedSize":2871751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGPNFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+nA//fpZXb8EOXsxe5N3NdrIS2rg/bKhp0D4fnzFQv99LiHtmt82G\r\ncA5gaWlrOz19IEkgfQjvE8ZbgOogB3i1KWwCkCIECPHyia2woYcm6Ubf/05L\r\n6uuQse682nKGEz4zGnYU67b99nU4m1Gb2zKAfpS+jMfd0Ks3mn87Q6XcB9AV\r\ngEOZ/CaWO4eGw2RG2SlseR4rxzTWdUmwmjVq61oGBbcfCjVaG0Vm00SJ2seh\r\nGF52iFS+VhWzjyUisp4ZylywespbYqxrwG35sLEehC7lo5unDV5MLdSnrbT0\r\nDivYb0fBIch10GpZglWx0SJz7COZDkugjE5ZFhDOsjWWiyrXE7DSSJss1t/U\r\nEwUt9idlZP6Sfrw6nT9ao922odSy4tXl8olk27oNt/PXaNEnUeCK0PWnWnz/\r\n02/yXXW0c3oJndjCTvc0eXNc5WknwzqqprODkHOmW1yfrKIWS6Z+Pcjum+WK\r\n9BVBM4TdEbwisGLbmENWtUjslATXnKtrr0Os5jFE077Agh/h8Dns1Nj1zhss\r\n8zVYYfgyRfmsnv1q+z832ULky72KypAWVA/+bohcMlKWwVm1iedoQBlsqCpq\r\nahdTdIUzhqREu4EuhnZ/YzkplfgH7CAo/IgNDardxoiyTBAhWFlipM+WuzxH\r\nMaU/xKgHoyf7Zpeb5bpEAFw5jzzBOmb2IAU=\r\n=5gQI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx78Tw7hn5UjHuhl3j3a8y40hColnF0iB9rp+/0yonAgIhAOqpvvMql1CR3tcE96R6G0AxqYhxVdKAhNHySq//G/qb"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202241911.0_1645802309611_0.6783892771641316"},"_hasShrinkwrap":false},"1.2202252101.0":{"name":"@bentoproject/stream-gallery","version":"1.2202252101.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"fa0da0bef1bacbbaabdd17ebdc31b018e6450c58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202252101.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-d9P2y2Te+OxqIcGjeP/jOlnBkXH/8BIi1P0AlzMmNCYJNv/yOHIj4dfAkCEs8AQN8F/qIr7ytnwz6sdiH8AQnA==","shasum":"deea026e3c82a2d3674fbcbd55e81318001c492b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202252101.0.tgz","fileCount":30,"unpackedSize":2871751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHPxiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqR7hAAiarfTDNW/xWWg2/6NHcq9QyYLuNkmzuYkKwKRtBOq9NXt9np\r\nn5wJ7coKphVDdwStSSHrGe8py+ulE5DzUt55rdpCtTv6rKcP0DjMiNSUE7pY\r\nYiXXIYPtrV2n5ZUcCE3SoTOpG7oQCHanS1FssynFq6NZVDovof6kras81EJm\r\n8bU31XPmbCS5MH7adRnFfw1GMd9kIKg2wCdyzl9J4OJpMXIa1CaQU466v4Yp\r\nL0hXwK/Vnrubnb53Liiu1A3qkAT7+9/DLyiRxnHC1T1/IVWlD/iEmB/wBDco\r\nQtzLg3okUdqdbbJigVZcXr2dMa9cUXky/0LO2VtVV8wTor7IV3ZLoyXmWHuJ\r\naFbpcC2CwUCQusifA3gsxYSkooy0s6zIiO1IQhLcvmBhyfKno6Qb5C+cDrhK\r\nHgLHtdYO9UOx6LG4ApoAjHeqpMmKZUAGNix2/QTrD9gDFYVDkLo0h8ccp/kM\r\nAtMI2VQHOhQCxhNdbi58Pu2KTAEUZWPIih0Hz2q9PdX0GTcuAUq0v+aaHunP\r\nIOtaOdDTrxnLgPF31sXhn2J9g5vDSRnNzT6MuaqLEErYV3669EIjjdzgMWPj\r\n27HHafelrrj8/ULFKqZqcPQC4QsdzL+04c9TLug72Z7U2AtLROjQH6ZG2IfW\r\nvBCa6uhdnaTsvLEsT6BO2CciPDJbbeJFSqY=\r\n=/B5I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDe0mMxWqwKG2pK4MjaSMZaM3l0s8/uCxbw2TxuBQS67AiAewueYes+Y0lpaM3/jkPKCPneBCU9Gcexo3cIrmh3DSQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202252101.0_1646066785921_0.5657091188271726"},"_hasShrinkwrap":false},"1.2202230359.1":{"name":"@bentoproject/stream-gallery","version":"1.2202230359.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f459124bb58e0a0d2076f658b8fbe3c9db13a04e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2202230359.1","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-RJvKmvNRxHqf4nKbqAWIe1gX1BQH4+RJPGZJS48GwjdALwd1I345L1sIw+SjpATQLMEjhP17WTpqUcYqkTMv2A==","shasum":"127974827e33f7436ff201b28d5f818f882d80c0","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2202230359.1.tgz","fileCount":30,"unpackedSize":2876390,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHpjDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYoQ/8CpK/LMqkuWGx0r1KLKem1ANSIx8RF4K+AIiYCyvMBJThKS2b\r\nnM9Az+hyM4kkM9utQNfajiwX0W1Xk2Yc+hI0e7pJwDwohDe8r5cWTu80DR/4\r\nbMrUjsS5MKSdmvsuhJKukH5Lnwtaj8sYqZ882w1NH69ca+0Z3m1g+/jXn16I\r\nkKiaG+FoHqPdKXSoiOA4WNPDCMRyMQFHswEyz+44iBCLR5NeS6FDWdxsO6Q7\r\n+jmdJqe+x+HuNyk6/oOZA6WEIfRSKDekQxgZCb/u4SbLcCCoWlrjJG5gI4ol\r\nC///Jvd8JCjITUCXCPF+pDAbn67gU7nQfNxwT6d04flU2EPR1rAnmcVNgq91\r\nPocIEe1lqW62lA97+dyW2t5ELaukagkQWoPeRlfxTovdmbVqvMmQqFPmJhMX\r\nXemkKgYmvb7XVcdBF7RqJwawd2NTijnIri1e4dmacLyYUelu8trMVNZ5BRNi\r\nlmCQVphkW1+EvnW8/+6X65Fzje6x6niIAmlgpjXS/dfSaK0vtBfR9dI3hGOe\r\n4zXlR2Ipk5aHgnHJpILNgYM+fCo3Ekj1fK0yYv2B3OMJPUMrJKdGR6BwOtEU\r\ncD/BKuWw6a2XwEjV2TyDdn8q3gSsACCih5H1UJzx3JwCRo5gfn2zCayjsFuy\r\nA3inD8drD5TLa78VTKcLPmqIHFZichvFmQc=\r\n=xLik\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbbNKssqAL4ltMGUWt/75jtrc2haiLfZY/YmXEa0IFGgIhANcob3SLJoi6GcuoQ/HwbGpz+0B3lQnpP4yVnHWZGdn3"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2202230359.1_1646172354895_0.6739609195121374"},"_hasShrinkwrap":false},"1.2203041950.0":{"name":"@bentoproject/stream-gallery","version":"1.2203041950.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2203041950.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-0yimRby9KbXUe2TQ5Cgcu7/tw0oep5fGAvXYO3fsHgGiLs3q+9ZEPtte2ovsNdWKeF8l6BcnO6AKuDZ4eJad6w==","shasum":"bd75557d87ff2eb6aad7820ec889228ab2d0fba5","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2203041950.0.tgz","fileCount":30,"unpackedSize":1696047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNyeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDbhAAjO/DGLP8SJijUXqsmDBpyUiuYUcUSGg+4hY0IMsohb7MhHvt\r\nEGmrRsAiBmZ1TRUQ4Qed15f3EZvdcvV8+faAL7FOskxQ7Vvq8RyDpTGzwg6a\r\n8e6iNomoG5tMLIJTzvtlLsuwH40tO2OLoANDKbSVW1q37kREaFbMuhpw9sq2\r\nTyVjo0k+ZkRw8HGNmqwiEF/CqsXHZ4ODP4C4rGZayR3eVjwyrkfxcxJ68sWM\r\n2JY5770WfZIQvsRKWWVD44b3jH0FSD1MiNFpSIkgPykkznulhtyTOMbULyeg\r\n7CZ86KkIUpabIBIp4sFmH6gfGogsdfmL/J+IdmwWbeArIrigad7I12aUkJ/W\r\nqjE9QI7HEAVoAmcchw14YaSWnMKik593oaE515dMYNmTHNs/M2tnFGvm1CeP\r\n7oaWeNy//QrSZ0QLlpDwufqHjP1x+jig0bBcbD50ApVpJbo6GoyVKUoDYK+5\r\njoQbBI6tZc4oQEtrTLd/BhHwn9d0E606h5ao9Qu0iT8jcQ9dGzEyIxXYWE0f\r\nsi8mB/bNgmnzdLunOuSUBAW/qY68vOTU8kFCEyVeV2xX7xtXehF5jEMVvL2P\r\ngFgUYgpRp9Ki8TMa9upTeA7IjNWn5y6JnrIPr4bM0HClkaSkYAEXO2Y14qnK\r\npckbEIVnpYi+bk68i58zKmetM4CeaAI+IYo=\r\n=/S0j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOVl0BMbccDzyqrb/oGcoy6BAnBUp5+4GAxwqY1/ftBgIhANiAVJQ+hvZQHNCsUXRm/kWnq2qlfrFw4irVj6xEV+ds"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2203041950.0_1647369374413_0.6537189642921402"},"_hasShrinkwrap":false},"1.2203151539.0":{"name":"@bentoproject/stream-gallery","version":"1.2203151539.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203151539.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"fc739c0d339dbae236fa53a87188f5f7ca58f25c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2203151539.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-3mZu7rem9K9L9mBtzJRtH4GSep6LOE68QReU2FJN9QrpaSocWUBV9mKFKPsUVL6lf2WPf2SrQ72KJYLyo7dXkw==","shasum":"2024d1db5bdeb8a0d7d13d88dc32748fc90833fd","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2203151539.0.tgz","fileCount":30,"unpackedSize":1696047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZ4yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5mxAAlf7LulNNE5VvOZFeOusMHJ9vyBYw5/UyiPnB/yT1Dbtfffc/\r\nTLinJTENzWW2t1QYaJlxYNOCpm/f/CMX/fUMxT7MAL9sgaWdH+DVV2CLYK9e\r\nv0I3J166eG1uuSh0RSZfjow2YM2BguvQEgBol7ldt89nns8FncQ7wpG0vCQ+\r\neQ04Z1v2Z/RW0bdCFRE4ByQKJBGO/hFUA56wDxfXZn/gACkE0YATtJLyiN3t\r\nqhZzBE4+zg+D+URT8NKNpU5F3rQV6hfcmfX7VYWGpsSs+1fPqBpQ2dsPCJ09\r\nRm/NFjbimy9VB9Q5dWc54mKN+wlTEkLwffcvaSyXoaILhuIDJrB1VpwwJ6Vc\r\nQfMzTQrRoQcPz5TWCTo8mPW5RbI/A6fZnEysF0UBoVq0nOqm0cOy76en7zH6\r\nmo8QLO6+sb01HL/YmtLCjHZOtYLgYj+EINMUbvbL51JbTGDZfWklzTazjO40\r\nsWw5v6LZn72AX4z7zsrHqr3vOXKlVS8PE1PzC4ncpeI79dA15MBzc4AJ1tDo\r\n3s50VCeQvOs8W/DXoUNxTj/uUW/w6TqYMdbIKj1OjxWGGMutFkQl20z+sIEP\r\nH+kUfn9u+CuHA2XR/UXR+MLfLGJQ+WdSRiEG0wNqwcRpCG81BR3ZzOlKtdwu\r\n46SrKUIvnkeQqBcNbJGCR5CSR+kCRluuZSk=\r\n=2mkL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4PjCgDk0joEHY3JqoewZchuWiRPPBxRP6lJBliVOfpwIgGdrC6htX4xWiTaFjeVzv++Ta5qlVdYKiBeg/KcuVsX0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2203151539.0_1647418930272_0.8050968117715391"},"_hasShrinkwrap":false},"1.2203172113.0":{"name":"@bentoproject/stream-gallery","version":"1.2203172113.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2203172113.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-mBKZfjN2PzyH9L1tRlGlhVNJrgvrrCz2/hz+3ZFB0kUccKzN/wzlqLsapLt8ApG1F0DGCVYOfa2mGL8AWKMPkg==","shasum":"91e9fc809360d02880a73435130649a218fc55c9","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2203172113.0.tgz","fileCount":30,"unpackedSize":1696047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNEFzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOBQ//UWhCivR0lkA2pYBb3e1SN41IFqjWvlMNdzuKZmYChJWj3sDW\r\nRdCXs5ffnMUhUsmr+ACrWkfcPmo3mExK8XA01G0LaJBY9da7td8nH7bHWadG\r\nZGGD0icFmqaKMliUkbBPXBtnLB+yuZneYytMMA/kuBRjahJ8UfSvFu4IJ2VI\r\nF3KP/+9OEqoqQRodCyj0Ap+Ss7Edb0W/Y6PD2pe0g+FN3ui5nfD0XfLGquUA\r\nG8AEVeTVtT0yVm43Bjt2Ty9GhBWAwRglqMiXL1UmLcp9X+lZfDiiisgsPsvJ\r\n0Dk9vRha+WN3efePCXsDp8j/E81gMcjXzegMrejSFB5vXX4enAjSYIuymdOD\r\n1Djb8z9Fyxd+GJNXiekDxtkZ7KNhywPi5Q7evrnXnZtacXvrtaiCKZh+b4yx\r\nfvL1kVvNPrifGCOUcNFkezg/WejrWuKKJwnrTMCprxEuG9AhE1C9s/lP9GZv\r\nmQauaZFzS35RCq0fYq2NWXG9fJxvOQFVA6yEWmbzZ02dVJP8vBAamGSsWgjI\r\niTuONlrzdexGkLqfHupfgLCorPcAu9luE4ipvkue2f4CCqE2rAJ3GIpTT44/\r\nb3NLqFmwSYj2aHBKFlLXPEWT8lw4d9OkVkwLgYFV+TVwX5FGyO0nUzJexDfF\r\n/Y/B+ETVovgFGVyZbFDTtiQTSLQOefMckWM=\r\n=JQ0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHEa48aX9VdxO46zvrKtKlR0i5J01R0g7juGH7mGfWm2AiEA2YPsMX8uPE9l77FNZ6rtdM6pfAwxy4GnwpuPhHRPIRA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2203172113.0_1647591795688_0.7351259040057618"},"_hasShrinkwrap":false},"1.2203221937.0":{"name":"@bentoproject/stream-gallery","version":"1.2203221937.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203221937.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"11fb2607ccf78c526a38e31bc141dbd3ac75d326","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2203221937.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-UE66Qd+14uNvx1ggh++Rx/K7Zz6ArGLJWzO0lSv7xq+GGFGwDMXsZysBFkAj/koZ6DTbnEd+VnAdcuoKxqf53Q==","shasum":"193daa9ba0be028df2deca1aff683a7bf463208d","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2203221937.0.tgz","fileCount":30,"unpackedSize":1696047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOtliACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7JBAAncEy+r5mUzi2I9bBaZEMBiEeAevLEfHA2UKcoRs0wy+7THj1\r\npckHxCdJ/aWyNzu+t3sIT1OwnoG7aOi0xDHNrHzLlAMGr0+KTzGlfSJeBO37\r\ndE9OzNBoWaaMFcaKBkhMFd0bgBiZVqvZMSzJznXzLr9VURzrKzRWVXHawWpH\r\nHWjMyPRZBwJBgVflmuQsKDq8M6n4iBGBwiRSJv/CrK/7S0e5j8tsh+OXAF/n\r\n/F5qsLyrMTc9hObK/SJU6Lmiq6tpzdS7FWJi2uZ8KUpsSeqSypupG1olZukT\r\nmA3mqy/aUaCQyjvLZWJHnYA7vutHIKVYCNLWJ4l9F4fgGcX+gSJap/6Ehcu3\r\nl2f+FR/0ViBkxC6fPZ/r9rJVRdHndp8HlR+GR9VTcZ1qbfLNIBZA1q6RcZbL\r\nJ0pCLU5p+wvvkxJL0NiH303HJmT48V38wgbOLRtRQxns86b1wUezNwd9YpfT\r\nYMdphOA8PSXRy0uCLfCqXacYyesYQ9HzNmPwYDgyckiT4oUuSnvmJ1uArmwg\r\n4tnyZLxg7xFQijvhQNDVdw1ySDDykJxUURgZxAPk07nNzJ7XFNfWLCCCGrVl\r\n2/AZYSPPwf2J3zFg0HCw2sKHTYviOHP8hY21TlqYvGGNU43OP3C94WM5Nj4I\r\nWm2bzMvfbsZPvdOuP4n3aa5GF6RAnkhg2b8=\r\n=e3ZW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQCopGQMhLVgJQxhZq/cKem0WiixOdJ4EstreSCd59iAIhAO2Xxu4klI4kPNizMciEaz7KrH4NLIKi6ojTOyEPPuMU"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2203221937.0_1648023905960_0.3971993826871947"},"_hasShrinkwrap":false},"1.2203231914.0":{"name":"@bentoproject/stream-gallery","version":"1.2203231914.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203231914.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2203231914.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-/KgUFxKZU7TSAWT0Yxr/JOFLBFrE0G2JUEC5T0UGaAnhdmwgFZQnahbtM6RtjsdeN0Zl2mwozrwg2fx3zs40zg==","shasum":"2043a883badd7c924843d1dc0ee653789ee8d6c6","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2203231914.0.tgz","fileCount":30,"unpackedSize":1696149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCqHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPVw//Q1jA3HBL5fFzq/6GJLgx+j8fMJ0wO/XHmDhUrIODTlus2ST9\r\nm64pBlhdqt+GBLc6k3UsMaaS282gw5aiAAeeRbjgELqoSdz62VpwmYyhb7Qq\r\ndcB3Zmhm8XabiVX56kGc43AbA+91uz70ODkXLHg379Isn3qAq95i8oP/P7LW\r\no7Xux7TmkYaenSSEtJg6JCn+9t9e6Sx5NuvW602YeFQ16gkMsaNKpROV50Zd\r\nVejvma7XkFfVBo8LQTuZi99+MmygSLIoLVqeeonWqHltlA4K8xTZUyUAfhh7\r\nLBEv+nSP1bT/McrX8CATcy81Im5BJ47bWsPL69bTbn85p0grKdle9bF69Qlt\r\n0rRVLIB3pFRAwzM8VOlOAYVvgbMAksO9+uT7lBSZVKGich7aRLsegYx4bEx9\r\n3yM12wXtOy+qp2t+DaSXaXhtwtMC5y5KRakEsPKYu/W0wr3/kWoUhGP+wxu/\r\n3dK8PCzgjcA6jcJ4CYYFfNvmuwF3Rn3aIHH9XIMOzgzBMc9Z8xdZsQHcGwl2\r\n5YZaPt3eZClCSlXr0BQ5R9oj1o3VcZTn3mTUF5Fi3DfuTEEuLbeS0lbQ8kGx\r\nNozs11dDgDC4j/JjcsK3A+dtqVscXq0+9ZTv/DtQYdQfOCjjMcQBeShdpHkU\r\nkkeeMIuQqjXv2Xu9Yfwb/Tt+G+RXvrlxKVA=\r\n=2XoI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpYYkhJzxrFeQe7GFfNK0DlKzzUPJIvT8hxrSDvDWlgQIhANsxdm6Z58qbL5yhunFsx920MBdggGxeYOshewXpvr5X"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2203231914.0_1648110215260_0.8971865594598145"},"_hasShrinkwrap":false},"1.2203101844.0":{"name":"@bentoproject/stream-gallery","version":"1.2203101844.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2203101844.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-KsWKloo3lLyR+bLC8ptELWfD5DRxCaoVgCpMYqeI5qd0/tCqVBuhcRIfVmVZwCSxuKUaqcA+VIGf2xyF8KcGgg==","shasum":"7bb78123e3b055504de6841a5e7518af6e5c2783","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2203101844.0.tgz","fileCount":30,"unpackedSize":1696149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNAWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6RRAAiQAj+nrNAiJJN79Ia5HxQEqfoX0ejd44bS5DOF49+s4us7Sl\r\n+MBWvl4pFdWHVtuF5YNfnQq/5XksvjrIog/BXcFaCyKkU5YuJ6tV6zSFMmnG\r\nA17m3jMbqxyxElIwZ6UOkCZGunFdpBQIVt2oxvsQKSN3GLQujpj/KTpIe9zK\r\nETnGSbP98WEzpmCw6L9uliOWaQ2WWt0Vo8Tn1mFtrjKIYMUW1E91T5DyvwjX\r\nSmdd3jLV2WXP64khK8b0p8IZFmVnOMgR6+Ow3/eHDAW1X6CxdGQiIzEuS0vO\r\n/6mfJzHjQwj63oWTkAVFo0liDTnTyifZhq3RcHZMaXuzEL5fvOazGKnauQiI\r\nBLT5/LwPD0KANonQC4t7oAkhzNUXkJeJzlB22qtZmJpCCmHoP01MibqavDXP\r\n3LEkY8a499XUzfa2s9NJUr9V9b0dhCV399/kafSa7/3D2OYDxIr3k9sxAweg\r\nWxjOS5DpSjNG44OIRMWnOXXGG9dmtVa8v8PBIC9leL0ETdWK9MUGe4EdNb2k\r\nyjDUzkbypnO7TRogTId3Z/q6ddQJ66RfVjwenGdlSIASNHwgUOG28eRIyzqf\r\nzrH4vghACLbzeO7DkeOPAhcvM8zSF0PTrkeR4TGU6Xm1bHvzFzLhG5zdUPAa\r\nCPRnjrAA/0tIWK+6dcJYkhb/+hGxvAUWzB8=\r\n=aTcp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAHn/5Sjy2PUBF2l3X9+wHFIax3m6aAAqDUC5JNkq2YSAiAVRnAQM3eO4ApKP+sj1jJFTs29d/eA6OFumywgZjsaKQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2203101844.0_1648152598051_0.8979379194122494"},"_hasShrinkwrap":false},"1.2203281422.0":{"name":"@bentoproject/stream-gallery","version":"1.2203281422.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2203281422.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-KCygDQU2vzrpQOJsEOzswixcqaOylpzz+3kSK2U/n492bTZSdQnusQEf4ZSPlNofezRzsZsyerDo3kNYspJxpQ==","shasum":"e24a3ad455e314c7f69dc02e81d1fcc73a72175b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2203281422.0.tgz","fileCount":30,"unpackedSize":1696149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsNEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPPRAAkRH0940eNg1SE5UPPs6goPNljFCqFp2CyykFfILqNTyUr3ez\r\nedFCOqFSsLPOzEgMU0f3BH2+GPKihyqH+Aj/hwLqx8B3lIsh9wqv9KQL4WCK\r\ncrDla1sv8MQe23QQUF0uGkqp6E+xJKWVJtESkb/MJDcUqQbPhJ4nonhHeOP5\r\nwiSvPvFh0krzOJlX51cDtIrSaWsYC4O5VesbnpMUJmnmjBqWM8eflN8mnGa5\r\ndZU6y8tS1X4wWNATNtJw1QgCRCf9t6ZylbXP9Nq5cAlhoEQzhWyeKZOtcJ+o\r\nkoFB48MZZv/MZ+wYMbsMYO6TJJAiWVxqAnZ5uSE5X2xPHWX4njaaGUYhmhEu\r\nt/H679f4vHrU4s+HQuatrX2+7AyNUkxrIHMEeBg3WDO4xNRQrgD0L7Z3GHqq\r\nh22aNNwPJZZAJyQzLIinLBKrmZTQN3kQTy9Xf47B7PNE6WGMXweBJMCpUkH6\r\n/mJ9g4zfOhti3i1E2ln4aRwrTTxMQyldLolE3+Q+A/8tz55SqFiANl6hfru6\r\npjWrsHGyPejyXijxGb0YtUzj37JkIBlDdXlC4i20MTgl3OZ7tHDGgAfHG/NU\r\nnEGTolTarxz7lF4UEwwC8Y2jrsT7VFaXVHC8CGzvUKzamzk8J1sbMqVKzIJN\r\nDh9JgSUbRj8OhAdxtON6nf67TW8K1jlCVp0=\r\n=0pAp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEx4liGb9d5XX2EOLt0mu74Y6EYHX/buJICogNK4v3xFAiEA61lZ9vuesGU2TVbVkgyBYMZlnanV06GguIp89qJNayo="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2203281422.0_1648542532475_0.23133482535104544"},"_hasShrinkwrap":false},"1.2204121632.0":{"name":"@bentoproject/stream-gallery","version":"1.2204121632.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204121632.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"dce11ee1542a2d10e47b8e9875dae137f4cc1b0a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204121632.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-O1yMStAGZnYx2C1YHPcToocjvVmfRr+Jofrt2Yt7CBdFeH3WI3gk9YWoygMtrldCqCUetv21ePRQP2cXRaGCsA==","shasum":"a6d6b4491782fa4f2b0d47a2ae35fcc610b11f1f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204121632.0.tgz","fileCount":30,"unpackedSize":1696765,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQrjAH7zu8hH5wUliqaNWcD/p2I+e6Brb1fu1g86yfIgIgB4TFlHalbHSc9wYAT4xLEYagZlbmxu34L3Slb3H04b4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVcGyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6fBAApFKM+FOmKbHnzow0tHD10Ncx1ZKg6tkKK1LxTrNX5FXhsJM4\r\nTTNJMXYdEMCC+B2KyHc7nfb8OU5aLA+2p/Bji7W8K3KDIWEu7kF23QcZh3nB\r\nPOJvaiLor86YMgKHKDyWy/d5cjzg4gNCOV25fOK0OGfasohptZ6pA7e0tHCH\r\nml19fKp2+DBCE5HE0eYy6OAcABRuCXbSfQsbHGJEpwzSalnqlc1ffd0HJESO\r\nzwLRjxCjV6rD/bd75qr/3IJf+Y8aP0pq20r8R301zNMHp3u8z5/nbJyNZxoL\r\nEUdKKsfRC5yxbY25wEwRysEY+FU1Yo6ufqEQopUf+ScFLqBc2fo3yqBlu7wG\r\n44cwm5d555d2k9xGtXAaJlt1jTilo8SiOwB5qVCHi4BRhv4vGzps2gByRmcS\r\nKnsKGuRVEhm5A7fq30cr+n/JpnxJ4r7r8TIe7/Sf44GqTEmA2W40ooCwIqjv\r\nqMKMWNbHmpDim3RLpy4p0dmpQYPxzPbpbXOjZ6V6Cee4EoRLs/rG04CB/Nnp\r\nM41JESRPWKNXexreDtnLhpE5Kngd4z6FzO+Q/W06td+eU0ZH5kS4sqY6bVQi\r\no1ZlPOo6piXCKii2eKGa/pfiNIaImgBs94+Fpf2jMLiB2kQtMQNNpzqUXWQp\r\nrtdj0ih3g5/zDNmcbhq9RgNz55WVBmg/kQA=\r\n=GUUM\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/stream-gallery_1.2204121632.0_1649787314414_0.4198873843841191"},"_hasShrinkwrap":false},"1.2204122000.0":{"name":"@bentoproject/stream-gallery","version":"1.2204122000.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204122000.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"9d10200b5a9784c35ca9fa16b1a4b3078aab3180","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204122000.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-Okrl58yG/LQQeDoXCxUeRinq80yhrjJQj56hjy00gCuRZVfVICbIQt4G9uv8fmCzJ97+yT63kwnqj5/obP6iIw==","shasum":"e32f0649f12344579084c00050f23a63eb3938b2","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204122000.0.tgz","fileCount":30,"unpackedSize":1696149,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHt4HnPw78crGGaBw31r4lbtIcRVnR8gKBHYJ4WgZUpgIgG+O+IFZbfxxZPUczScC3ddpQ0+NafF9QBLHeUt4tGtA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVopEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpjnw/+KR6Q5jlHzWEkniHGvAqP/7DUYOH2TO+CUVW+HK87RszIlRnU\r\na8JY47+eFFw1cexaDDQ3jiamCt4pZO9Lyqco8joSbw9lLSPDJuDvlmSxfgkV\r\naL4avb2WLUnXYVjXaF5iMxtMMoCkfHgFDB7aFpT+moc2XLL/wpB1dwZFKCk9\r\nTU1K4wp/lLQ12TMWhoFjLBDKIWtVCCGwD2ZUPCRAuLYURnKF1iHa0cgUImUt\r\nVuAjaiditPTF4l9riLRwp4w2a4+Cs1e/qmePIeSiFuccnhiaiNSLv+B6GGyd\r\nA0vi0BqqYjxSLF4fUTx6yMZFQ3XvR/ZGGJFZwAGj5xKS3bG4SCYTVI2B+DRT\r\neBsMbHor/8VP5zbJnwrmyByaCmEQSf437dJ5XfGoM7WfA9ntnmthcE2KT7Tj\r\nn+yBML/4OQxmWxmcFns8MehgcI9URrqqJSFssGpIx7rQog6gyYp6GeY2+m7E\r\n+o9aWD+OtbgKAniK962PGsHoVMUx9QkQsgHhkeuMTtNGVaBRMm/CR1xGEHou\r\ngfzdmI3pmxXCeJ/IZgjfdmdmK8XZ5dbE5CUjs8cBwvBK/8yyB7BZShxNrR43\r\nkdtQsAIQPLCVywzhU8yZ/fNFK8BHzubKcWfCdT4HrWyvnaUb0PLWMYguGvWQ\r\ng/758X079eUnQSf5jXmNhoGHgecw2KWBoCQ=\r\n=Oqse\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/stream-gallery_1.2204122000.0_1649838660441_0.8833734987955499"},"_hasShrinkwrap":false},"1.2204132005.0":{"name":"@bentoproject/stream-gallery","version":"1.2204132005.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204132005.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"26ab90e1d3f7c29ac76e3fe33cdbeec9e828eff1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204132005.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-QCeoYSjO9ttw9qrnOT4ZKMSlFoqvoxpjOdD2pAV33IJESAYbwfA92I5WHw/HyiQcQq/8K4hSxrhFj/OXqYBjPg==","shasum":"78731fb76c444dbe34fc334af315d6c52715885e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204132005.0.tgz","fileCount":30,"unpackedSize":1696149,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+EgVm5fISY8vGY/9dFx6M3kC7MQBfOFpEV8lEm960kAiAEdMsccsV+RHFTPVagVAStSJGnnSsVMuO3ya1CIl2Syw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV9wLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEvQ/+IVaC5tPJ8kG79+UejYkq08jSZlBvX94suqwvhEGFVtqCLt4W\r\naH7VUYokPaP5Ej/E5cNwr9fP/wEMVl8D1Gh6e7uwiJoUIWbQLVpQMDoiGad1\r\nUB/BFTgD8hkWEEUFeSmwxM8BJrgybtS7+vUDhYkSHxRtZIdV1HB2jllyW2TW\r\njNT/3rKqrpyhReTcWJRurirXU4Z0917JW9fGh8mAs2ZERTaeORjug/DChfQU\r\nUCFx0g+fs0cFGBAxYTewl6dYHyp14DVmPhaM8Tn5ttqWM4ZaZ/I2rN9qzJqN\r\nLdDQaebqOjgw3nRC5iLpxug5nQ2+3WavTKxjeytWKFlGnvnMVCbtOIzMuJly\r\n7zFwGf8zfID14qIAkDNOJf5n6g+K6lUAEXVV/EKBr0O7XmvJ3l3osZnYRjZR\r\nyqxd5CZfqrTmPnFNk4PNYX0ZdEzH3sycJMwXnVvlyRyXkxkmGewwVM8wLX1X\r\nrWtdBouRCY210Wt6oKZ44yDJ0HrxR8IgGJEYSlxLAYPWNfmtBdqVs7TYrRPL\r\nOA+KsiZOyIJRFXAf2lVRvfO0pBqgZN3xIgzpCn6M/FX6I6Atnv1tiLGLGQSp\r\nl4b2+SNbYBfo9eBUOCRu+5Q856WzMFFh0dTNv6FrnIErl7zV2zyLVlGqFJw2\r\nTTHIZcl7vPosYWxQb0CP+jo5VE5EJ9rx5xM=\r\n=e5pI\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/stream-gallery_1.2204132005.0_1649925131216_0.9522994284615667"},"_hasShrinkwrap":false},"1.2204142048.0":{"name":"@bentoproject/stream-gallery","version":"1.2204142048.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204142048.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"32d29a09afd66bca55e024a4f21b1cdf6690cfdb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204142048.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-1sZ3XNlmX6c8T21HvBhEAvjaetZAFOeg29O9nZyd5tveiW6vFRLqo9TDoW24QfHuo9o/mzhyQCWzEGA5ZzxdXQ==","shasum":"9e6589408dbf45bc57b7b08d0baa7de4d9f70f8c","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204142048.0.tgz","fileCount":30,"unpackedSize":1696149,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpvpptporcJmRR5Bw1kR14VwRkoQcsCo0fiD5kBRgVJQIhAMgsYIW8hCYyQQKaoUhe/sfTTZRCN0pz6RjYSsbHZdxi"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWSw2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Qw/+OSqp3NciRp4fy/F9qBKV2EeDBMilemy0LXPcp5i1/Sp5t8Kn\r\nGJtMHqir29QEPiFC+is8FyeOyp/cgcXlV04T8U/BKbcs0NByPgHtafhI0O0n\r\nOsN+43jGvfHd76ni4F6St45dC6juFCceI0Z6nhTa9+22cG1JxQYCLvoL/7p3\r\nxSxjWix62Evcrpf1UiaqF5rnTtni1bchV4rprGZ5bp6i0pI/RN3T7OcWIzTN\r\nHEI6QZIUCgISxr4QgJsGXa0hq4BQ24NQGHvkJw/DZxBe/RMU/r3g72/BRD6C\r\nSqmvexbpNRv8IJDeX55xxwoXp/WD1N5vX8+fNBMLrwtUXia3lYB5KUI05sXd\r\n5XuLBU+WX/94836v8gPLtv6GsbBGeeQgdPeonHuOqJbNiXmFpvK9+dfM8Ou6\r\nsPxAkrrPIBuW6xGN4tArkICWVr0dL1/xYWym15NpZPgwVpoZ19GBxaJPF8px\r\nMankqo/NA5wnwrs9emY1yJHPmY8bRj3hfyZaiqz7Xpp16MdwGfCEzt0Is/tR\r\nwPemuMRqmCR2nINehTTBqIIAkEEP8gf6W4sWoUVcWz0alUDsO1gZsdVxP0Q5\r\nIVBB5HxGIm+hT/pCR4iHRtZ/UbCk0kdam5J45fNDrZEhbb+ueMxFJLSN831e\r\nWWte4N+ReDm22NtNjhk0/x2mHkmbxDolikc=\r\n=RurV\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/stream-gallery_1.2204142048.0_1650011190364_0.9673702379609566"},"_hasShrinkwrap":false},"1.2204160405.0":{"name":"@bentoproject/stream-gallery","version":"1.2204160405.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2204160405.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-+az/E4axRoIZneGJ8pfzNwEsnA1X5VSagPucBwXV2l4F7AzyeB27l+u6Q070sjmClMDRl+YJLupdxEm2tDufVg==","shasum":"bec3e21fc670ed36d49c205af1495af622f542e6","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204160405.0.tgz","fileCount":30,"unpackedSize":1696149,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZFYYdFC1Uuybe87zfryXlL9LZFM/50MoEPYM8jfOXQAiAQJiZFnh0G4Ze0w8A+wf3IPZEXXFleE/5rxM4cU9yIVQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWn0xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3SA//YTbmG5XOxeBvFKc9+EtWKxSrg2ODLwJFfrKRzqF+dq9u7kcN\r\nIo0IJ2xL6pUu56K2zInzS2ygMUFAdT2nTwl+taqoDkklP4S6Yf7KMYHq4+vu\r\nHEVdsePa2OLXsmYWgMxe0DjHEyVtR3ZKewO9G9Ds+lg2FJivORYTtb6aW3ec\r\nLrwb/zDODlx+c7sVYpyAyQamnKQW2FC0M5gVimjr1b7RK5xC8UDDXRtf4E1U\r\nDGx+3ZvqESOWTZepHcYOulVffGI5LO79oj4HDFZdphlHEM/n8rNrPoPLAe5S\r\nbJIlFJ/Vl++qWopdmZmLz3P4rbkUTsycs6GLfUxDUfIKRtjCo+XgrcxEIjYL\r\nLt1/wiN5j1SGw5eylovFrdPQU8XO5b5mUdvF0fA0eXSCOqr0dL1kYdThg8UW\r\nrPIB8ZOTZiAgYkVDuaHD1n3GqOn7pF1jfES0lnbWxsSPe4KR+AEIdXWBQNvp\r\nEpGmxK5gEc/jSzM1hxujep6RIV4NdQ+84iWo8HP1TbMDqmewuKd04Bmp1rF2\r\nc1b4xkr0fYXmjK6C3LQhu6i1iSauJTetbPQaozFby1PNyRTupikty+HpKg5T\r\nXDcVTulbm/WKJi3BSVoaPKSXCDVVezEYxL4nbDw+dL+wU7pU9WV/RfYIWmFP\r\nWQidHFFI4w95iaO+XU/INwHExeS/We1gdf0=\r\n=BYeB\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/stream-gallery_1.2204160405.0_1650097457130_0.6556122293524553"},"_hasShrinkwrap":false},"1.2204182206.0":{"name":"@bentoproject/stream-gallery","version":"1.2204182206.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204182206.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"83e7c80d7406923369ada8c1a7a5dc660ebdcad6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204182206.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-NlflgC9oaX0sUDQDkGL46mLSiQk9mKrn8Baj+3nNCaApBWvrMUTA9a45JSkaCf3qJQyUz4zKgckSayvtAwZAkg==","shasum":"c2b40433eb3cf1b811003686c887ecd8e18c290d","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204182206.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnmHGm0e6C2Nx9QTXJBCB+xL03K49gjOUxIx/I/u7zUAiB8WhDh9a3oj2LBxOi5BV2pgajM7692pHgjlau2Tdhq0g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXnLvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIfBAAhNMaObqgcYxCvy8nGjrXJahQe7lr7cVmBLiKYoEzzDpZnhv/\r\nnXRzgmuzqVBUtEuyoBajPNJTndL+S6iQlp9tVRC13XkRstESTvz9lF4lxOdx\r\n44Oxv4TuwmXNfc6RwCBNNBCWStPmMgFEtR7zOmdCX1OcfmhrKAE+h5hZQVGT\r\n4Qn8EQB6+l/sFTNg0aUjVzn0BNkkxzktciCQ0SDarH/e19NA4be7xBiRnaRb\r\nwFSXxaVlPB8w4SXqfDaDSPiv34W/KKl3+nLZ9/yXBfZkX1tELKm8Bwhj1i6J\r\n/OpeKpyW4FfzNE1qdVqpcQLWUw2AHXXqZlwURLUY8AsJQIDVeexiN09N9lnr\r\noWnoCajSzCVPHhorb3H4iERIjYDmhA7Xoq3IKu5yT8MBjzF9xHJOUzKB4ETv\r\noMLGD1vdIhMeXkcr/1FFzAGFGDosOkmNpxDxKPi4bWAKV1Y3QMrhCyF+VkOP\r\nybD1UDKcqne3Iz908yGWJsOwU/4sQg78XleuA1iPfvbHXhZgRk5exksbJfR2\r\n1RHCo7qEghLGpA1cNAlrB4xeg8wm9NrBqEJ1SrbqGsi/8JZCUXWyHQR4i8H/\r\n8CocssMcNZmV/FXo8Qqq1ST8ei2XzKJmSr4bYlpPS/UIuw3EEGf/+9vr3T0P\r\n/PL9iyJJAVhjlecULWz6KYsRS45Xt7Q4PDU=\r\n=D+6/\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/stream-gallery_1.2204182206.0_1650356974887_0.6752403633626756"},"_hasShrinkwrap":false},"1.2204191429.0":{"name":"@bentoproject/stream-gallery","version":"1.2204191429.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204191429.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"2ef2d96efb4624b0ef0313b60134c9e35a4e8429","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204191429.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-24zS8lwnCBNxy+QWeV9YqmUpvFVgWFl8P/fvnP42EjNZtvMFuucc3b56gVK0MwDwnOK3n+ls6UuLEtno7eL/6w==","shasum":"c3201e29e5bc03f79b627d612766a4e2fe05fb5d","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204191429.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcWza/xhxx+aeiUsxAASOPWqPloGBoVz0g1t4NiDV4HAIgBllrJOQ4fOF01nxZbOgcaFz1sN0y9L5irKIDpr3stO8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX8TsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5fA//TU9Qj16hw/8n4n1V6jcwT5w6Bb1Iqh6RzADcHmmkZgW4bzhD\r\nP0WTavWqvEK+cbKS6dAAV8JIk0kKfctU0pktUvNujxQNhAWipGtImIM91wj3\r\nupvlvg235O10DrDK7mI1rwlgFAFpG1C03fIXXG4lA+6zWkafPsy8uTchmigW\r\nhM7wML/3h2LBPMGlipuNHqQo7LT3u9iMpi3MbL868o2IRVnW+VXf0fYJ1D38\r\nz4pDk6H2fUYJgSG+Gd0RkzK4pVfxquNNRQgMLaQYWHDYGvSFB6tRWc4gVWv7\r\nhjRdB2gUhnHpAGTF2gcOZp8vuFp2KwCfauZpstD7qV7JnGrgB44AzZgbjS0x\r\naAXKHjAjUdrw91BZPyvVjnDpWq4NtqFKiVZY1RB8Rj2UW0EG7Qw6Bo7gbklG\r\nL/XuvDHr4x5PXTsZ8uv+fJN44KTRwW4RV8hlwmpt2EEKuQ6Zuy3wOn9nnR/f\r\nKo4syDFMfus/IcTImGwBSMD220AejXEPmESG0rbbD+7JHuuQL+WArJSPyO8V\r\nFB6z0Jnf5av1gHa1Vshhu5ctf1bW/67k5XfoZXY21+fxGyo7JQ7EOAv6lqdy\r\nj30+1+Bs1R8yCyiCcstGx9W0MXxKYDawuKi6ggxaqrOxYl2LCl6fS1X2CYfh\r\nMC9I1m1I7UB40iPckBJd1EUWDPtY6BzkPho=\r\n=1OKj\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/stream-gallery_1.2204191429.0_1650443500326_0.8724595299112634"},"_hasShrinkwrap":false},"1.2204211736.0":{"name":"@bentoproject/stream-gallery","version":"1.2204211736.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204211736.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"01dad70364e4b2b9707441c2c8ec973e1547b195","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204211736.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-tngEVjSKqVSwJz+iNwfPXZbNy/NrAMuwbRWMfKaH0rGZaDN7h8Xcoycks21grWT/csRQ6zIk0mXAeg4uKE5Mfg==","shasum":"7a195d51cb4e65ff06103bf1d263dc0a887390be","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204211736.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHp/e9ATya2zbG2h6CwGsjLZH7TSO92p+IP1cG3Lt79VAiBMyGkk0xR8/EkcwftAWxWMd/zLO5/G+jg4Lj/zKljOcQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYmaBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRgQ//a26gPtk63oFw+DXWQbG0TUfH9FzR1j0prIiba5aikij0u85C\r\n3NYVYwpUX/bi9a/yDGEFWuIrxco5+cHLPZ1J/9SG+5NEAGMtksHi4BVyP5eO\r\nUQfyMqTbcTyfoYpJraeeQ9mv7TbVJMlPaqzmtFMGfOglRyaVojmDsTpz9mKw\r\nYTB3s8YHDGy4Sb3S7M+O/hnvaJlv7+gl/WJlY1+HCfALzMthfpYwWUwDNjD8\r\ny0lYGUKR1QV2xh85277uYo1xpUZx2F2boYUCSnq+4D3NATF6o6TzVD5gIrfm\r\nK2GDD+2HY0HN4iO4p99jctvlGj6mkI1FxK2WdGKun0cBllLnB7n/jUxKim9T\r\n+058yNTmL9lnT3EREPYlqcMloM1uFisxqaebfRVT943PD/v8NKfpKl3mawhl\r\nzXD/klF8zqYDVO59C9mk+nrvvHANWP9A+7VsUjWsHlC8OInRmYPsunClB6dH\r\n9fPiCB3+1tcgKKtsrO6UcMTutIVHq6mZ3ocKQIF86AOJ0z3uxsg5s9xZOMPi\r\nrdKYRRLl4K1QPGrvCx0nS67EerBYL7wthHpfHaMlgt7+zXMFAevEpSi4INp5\r\nRE3j9v8ow9eoVBEKNo9rrcrzTasiZ1DSBm1pk/Hgy/SjqHqbSavv3JNk5bc7\r\ne52e5qyTn1UQkR0wz752q26N+NnhCn0sWuo=\r\n=miln\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/stream-gallery_1.2204211736.0_1650615937000_0.6682803935875241"},"_hasShrinkwrap":false},"1.2204221712.0":{"name":"@bentoproject/stream-gallery","version":"1.2204221712.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2204221712.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-mBl+fGdADVD0LKXxu0BbHTYT/qvyFypzvxtRnupna/DVOWtEA4P1Ul57bbIbNwckuzMjff2pTYtJyXr46IfxKQ==","shasum":"37d75eb729e920cf5fa3a1ac3237cddc52620cbf","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204221712.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9jcvEHaJpxOGhUSsspvViM7Q3QtvElu6prGbLO6RpUAiBBCVkz70Z2FebiZFD6/FN0dRxYiqmt8NtimB+xV8H7vA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiY7fNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqU1w/9GkjY+PqmMbHJ1QxHy4CWk+c3M3iJXZwbsvSy/FGPPR+08+jQ\r\nmpJctzf6YFG6imud9+xUYHNtt58kGQF36nYHScd+9tUHGMkWQjdxm6yHIaF+\r\nWJPFOx58mDc7qf8s12g8rOAsff5Dgcia8gc7QezOyEwvCL3CA25jWSV9z61e\r\ncmcSuxejwdmkR/ZMKyKPhByBOVDOnPsrtvAsaausxwWX1HgSBfQuN/s4AQtq\r\nNUvZIJirgBljPFNiF+fKWVofHadAs9F8VKRgOzMw+JyF0cxZir4DaetWi9IY\r\nuMnwJCiPt7hKgYz2udAX2lbRcdP6DODAvTmEhZ+i7eF8sObpcQMVOrP1qSmO\r\ngoXYRzoNfVfUjhX0LguwbSI3lSBTs1xRDF52fHCqLZKdSJlsR5lmeaXiM7mm\r\ndjuocX2rWS4C9S9jvhiQaPt4BgZcH9JzEL0bx0kAyBEkHPFzROXd8iHVI+vs\r\n11kg0UsNDpK/J0qj+gaWx0xz6MFHRLWcQCiXGmaVf81hnIGa+Do9X8pyp0T4\r\nAoMk0DqGdHo3ggdPM4ava61vnZWPmarnshOH9GTMBL2z/JzM2S+tgHlU5ber\r\n2YEZGzpACNLG/FqFcSzyPz1nC290jmXNJSnMrZaktKagmx2vwWN4P05V5LHA\r\nujEtwNxYX5zVyOLBMwh1lCiYrY95k2Mo7Ig=\r\n=+PO8\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/stream-gallery_1.2204221712.0_1650702285392_0.23583102633931796"},"_hasShrinkwrap":false},"1.2204252045.0":{"name":"@bentoproject/stream-gallery","version":"1.2204252045.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204252045.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"9dcb73514b52c635b732b72b56561ac680ea344e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204252045.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-frrf54w9MaeMn+qMahO4CiMxsGLq0SXgrdoOJj7lItABLBzhpt3866Fh0OtNSk+jMluov+tILPrGkFhx9MylhQ==","shasum":"d59539587b4102bb65dd882bd410697307ac9211","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204252045.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLMXzjZXyK/aR+whjihg8+LoVKSgRJ1NELRBfm4FUAWAiAjdgfPHKY73Y57z+wXE6kXraAmySKd9UCklL6HOWoKjQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ63jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojKA//TK/OTi+oreLHauczksF3kMRx+uexHyHXlY8SpV7NaQTI8loe\r\nRMv9XjzruYo/U5gdlvyMeKCZXkracTlqzDggemmFJ+y0bs3K+wkmTyyi1jpU\r\n4M3QNZpMVhLrRxsc0LBbA/M0ORMI/x5Veg9fTas3e40sIqJj9fYiHgf6hXPC\r\nVibDEwty1GxNF5mN2yhM+tjcG1AsBFaeQHtk4/InSJSHVnTZkGnxmuZVcDns\r\nmCK++dsriIsTI5uG4W76XXQH/xIBGj07QQA+5oG/7dlXBtAX8RiRcCm7vuoc\r\nyiDpXqyNOGlNaC3P7VJqsgQfgSCgKBLjtenowAUx6ahaQkuAik8pEiEFdbGz\r\nepMYD4Xcqe4sjeFaNXdq8ZHHK2Y6OCMUY/t7ECGAyv8Y4XjzkxIsbnKGzIsU\r\nfLyML2xWMeUgNNKY3p519KppuyBgiJ6EJRR4/7qRRzq245fR7AfhHsS1cjme\r\nuQT0Q+9ymPQ1x0kXIEHy0quZ4F6Fd+S5jhc851+M9A208kWCscxxJDDOpd+4\r\nvbsgdgxTownA5i4FvNGJkBeJUILnHtOYACf6Eu5ceHquA4prz9rYrlcex3SP\r\nLtVlL5WgHK6Q83X7oMCIKR1Wuk5KNkSQt2mOBsmcd9jAz5JHUhO/Z7GhYPWL\r\nM9e07/ehZJckc5Y22DzUzJZRc5msnh1XubU=\r\n=V8Hh\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/stream-gallery_1.2204252045.0_1650961890737_0.3433840606151719"},"_hasShrinkwrap":false},"1.2204272205.0":{"name":"@bentoproject/stream-gallery","version":"1.2204272205.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204272205.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"c2397d28837191a7d145806840ca6ca9a73823d4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204272205.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-ZMdc1pBh/birH1koxyGmJHejYqju0rTxSL3HgNyhkFD9GZMf+GulqUzeeONRiHUhyP/De4WR2vvbqr7tW3Rkdg==","shasum":"1c74ed67ea8394aca8a6e755ffe0d2619f1e3033","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204272205.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNcfPQZMIwNgRGQACH0Gm1KHV5nMcdoQQkx2opgSznLAiBnhtAKtklg8vPMmmf8NQpN0/UEL5eJBVzdOHYBGaJjQQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJialDCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0tA/8DuiExBBKW+TougB6otMZq23LViMM5AGOLLKnTnTkhKSfIQ/J\r\ncuhqdAW0GDx/DbUi9Zi1DV/s19mIl1ZpqJXsO41c1yFMsi0E6fwdJ3LTboLF\r\nOE33QD1m3NM62W7CmnQ8noeD6a5FkPmBxnABrdm+Kd9HBU9irecKHTlL2WYz\r\nnE623yc+vUoYVWM5ZAYekd+TLtb4SwQWf10SuogK8ynGKOkwmxlFEgtPiXhQ\r\nnvSs1RhGjzHtKE9nPfw8I5iD8A7AqtEllyU4jaAUx4FbKx6M1wCfWcbtGSus\r\nKiKJWWjg8eafr40scnrK9dRSavEpPLVPhpyD0QSq9yyNT8gG18ufRI61Qoaa\r\nG3zwsLYuADV4Saw1T/fRzpJdyXCdFLjHc/zZb6sBmlDr0+qrc1Nf+3BPFovI\r\n236eBYP9411w01hSTxBUjhfcVgo1TearQXckUqsrum/NCHVIeltzIISUcYNo\r\nnlaw2IVpVIn3QYLd86UFxDAcDu1u7xefOstxmTppYACdfbr2fowAmB64+esh\r\nShip+UcxiPZpPku5IopNjzxvKMujIkVD2ffqiuIBngCWbjMT1DxoAeJqBOjB\r\n5ifIFk3hWaVh2Zn8O9tiu4NRjmAX+hkfU0Ip05O8XZa8efwZe8N9U2A9RV6J\r\npwTyaWwBYNgB7JqeupqPVxXjzx38YFhh30Q=\r\n=DbRg\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/stream-gallery_1.2204272205.0_1651134658093_0.4969176155281556"},"_hasShrinkwrap":false},"1.2204281949.0":{"name":"@bentoproject/stream-gallery","version":"1.2204281949.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204281949.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"8bd4749759e81fea16cc216637d7a185eea3402e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2204281949.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-lstcgo3+7yNBqj4XIC3518Dhqjbe2uZiQzVqz+1bKSCnzaGUasHOYEzSVWf7zuKFvh2BDZ4xH5ue/E6UtbXHiA==","shasum":"a6edef19eaf21f192d9072b26e68186bff0edc2c","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204281949.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARweTlTWftP2r/4xmz4vkMfuVFLhjQa3AO4RMfiNFpNAiEAlNWclzvRdiZLsiouoT2CngVeIeqe6TwOykWxKn296PU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia6FiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpT/BAAhqir02WJm8AxUi8rsxbJfsZWbX9u2A7SQOOdJ25vPT3cOS9I\r\n57DBqJrieaVkv2rgNhabVIXB68OT4csDSCGctrqbLnAw0YONaJBnOBiaREr1\r\n8zuTybU6Xp1gzc0qHGzlUulXBqKsACWnD2yQd+g7GORITPkPklKDpFTIMSkk\r\nSxqDNNFErip88zsxQSj1X6s/pZ+VD4k38k3G2Jxe/drtxt7tbbR/d3SPwg+J\r\nAU3kF5JuzYrDf+q2KmKlgc+QIgw8tLjuiwLI4KlfOJ+2tO9v2D8kmc50F5iZ\r\nCMzApv49DCn08g9zgZ+U+X7t9NQ0z+QR7DOrGxYOURilpLLlQheIGqVBhR9q\r\nYxgYIhJJr7Ks1jLKztQHWJLGm2Io/3Ovm74KxVUQubHuuGS0Yc77nAWK3gwx\r\nnlK1yxgim1i7G1M7GkHGTjpdIOFK6tPGubaLonXp972Sg12vclqiJwSexJkI\r\nC+tc8p/BOS+rG9JbBgRCzXR+NQzOMvmbnXjLmzN0XadR+hfrj7DrPsYfaDOD\r\nckE59c4xnj8D1Ak7KD+SFrzp23CwNJ/Q1Z6Nc2lFgl5n+jCwVhepJ/6rr2Ib\r\ncDNLGCwhmS5DypCrkx3AyOqDvMxc1aEwN71UuVVEv7q0tqlSrKRj0NewFuD8\r\nwzhN6rm9hpwL+LlBvlTMgQw8BzxrcNLD1so=\r\n=CkJe\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/stream-gallery_1.2204281949.0_1651220834237_0.7499638214971944"},"_hasShrinkwrap":false},"1.2204292129.0":{"name":"@bentoproject/stream-gallery","version":"1.2204292129.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2204292129.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-qqy/yRmfEt94DODLd54G6wT2GswF2Yg8JFP111LcVYwv71C/5H0wffHWtCm1036su73PdpOCrkeVwA1hxvjYDw==","shasum":"1deb15acb9a08c9b78357d7797f2e64a9fd70b34","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2204292129.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoE7MhZx4KJd/Vi1XJZubqielXH/nZoi0rSPCoQcqq8QIgXMMzILy301oBepAZZWufMytz8DRmNcSPtYa2RLovduI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibPJoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFzA//VNe+73mYOXnzQ1IldqsyhEp8AzAFFhCYnFZefZXNBtDHMV7T\r\nPSn0j44CMBl7adYYXvwQRAPAjFOWgDee3Jmu6FmOXXwcYOiZMnuaG/nSQfAp\r\nQntNvljac64EO7XY2lNje6qnRniy2lDubhVkuu7jxzv2yQn5TdjLxOvXR98e\r\n3IzrqB2vnm5umOg5BgKM1TEUeGfYsxf1goOHPv8dPfV28wSJWAL5f1dMn03o\r\nIC6j+rGltXI1NuebV3J7fxKAEoapqopaxsD2t8+ZuLQLexSTZ/3dy6GYBytI\r\nJLXSFMGuQpswYN6LOwY71RDWH0s6xGNrAWPOwth98fOn37T0+3Sxzhw22M8L\r\npGZJl3wR2KocTs0Hz+IQuihPRxML5vkjmhvi8O5xLdaUAqd9WthS/Ur77X/F\r\n9wXDr5Oqvs7fMmUvR+SO4YdZFxOjb5+821uvlTA4o0AhBwGeKuinYmJJaLcL\r\nIX6WQ4YLATJTJQrrCSx6pHTVywzXY5hhD7YyJ02PBh9V2BxEimwY4TOfY9Mz\r\nOZ4N4UR3DR8krrDM5LSD51HuxfvAAXzSPBOmLYbbpeHMpC4pq+jj+yzIHsIQ\r\nwYCrWPFHkO8sQ4OjxQvyZIN3/oviMVuWFK35XQzmk87YtfW57T/qhYsGVUSA\r\nFaNBAMcoJFZ1ATnn2nmQ8urnuEy18MR6nTo=\r\n=9Eoz\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/stream-gallery_1.2204292129.0_1651307112754_0.11545933013091103"},"_hasShrinkwrap":false},"1.2205031420.0":{"name":"@bentoproject/stream-gallery","version":"1.2205031420.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205031420.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"d3652194dae7f17865db127c7135ec194907b7fb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205031420.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-1a3iYyuhEVbh3KjUg/JLOobzc5poqPknUKC+zph1ZNOPKb10gqayhsVHxW400lqkNO7U2uJaO37gYzb2rcpGAQ==","shasum":"a1b243e875ba2ac806603cd12ae797039eb3b42e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205031420.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9CeUiCGfm4zQsPh6GvaEgQz3Is/qB5LnHg6Kqy8Yu3AiEAg3nz9rsq6Rti/2IjvbmjCNGaV7oRy3XOh203tqDF5o8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicjiUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJyg/+PQLfT39cweoAU6mrfc3kGFoezt1C11mS0GgCnWDO1v0C8LOt\r\nBl3AXGe/9j6d5ccONKG5RWO+icjtVL/ufJZ4U/6BGf9U2qg16kg9hqHtEsMg\r\nEW77Lj2mOCk7dOt+C4gW8WQuyyk75z+59djHB6pBE3EiH0OaMvWdSq8Y32eH\r\nfxSMIzeabPipcer+tEIXHmTmLr67XVgi39Vm2Fdai+Gl7MjzlspXhaKh0CCv\r\n5iyNV0bfsJ4PaM3L4Kzm5xHpXytNlzGCmt2ZjkcptU8Do/f1yyQAew3TdSTX\r\nslwJ0uDwYha6zxqIc5MXgA2u2HTseqi4NbwGREm+lYnMdnRS0Hnc3eLiO67l\r\nSWnL5M5ZV1ZmfrLn1zFx0+sMZXAn5xe1UAmBELnhjcdWkTg0tkOvqbsuvQpK\r\nigqFquu0UAn9bnR3oqVXHkxM2ZpjyLxW58+6RXjT+EYw4NT33dzVtgw09ZZJ\r\nsOlq7apwEDMZrtmCaWEqUe1CSgUf/NVbeuQ9U+f5WlEBy1ARWmgchkErjXoA\r\n+jCQYjfEtN0L3R2EfMN56soyNK+YdlaSUSPC6T5k/op99d1Gn8fYebluapYB\r\nJ7O5LDhQJEjPIrbezeVkQ/xk+47ilogRlYvfyP/C/yNs5aODXBzR5a+rrjnl\r\nBa87D9vsEaiQgd9g0iifXIz6V4BONPcTyog=\r\n=/uBl\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/stream-gallery_1.2205031420.0_1651652756663_0.09024095228086026"},"_hasShrinkwrap":false},"1.2205041533.0":{"name":"@bentoproject/stream-gallery","version":"1.2205041533.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205041533.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"8c9c66c7b1ace99b28d77b82807f84e9e8cb305b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205041533.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-pqkxFdr3yqXcE7yboW011IQoqUnbg6B84TSwU4Z04znFbWJBus2O4tHNgbAg9BeqC5r3k7f9Pm04V8+m7Qmbwg==","shasum":"8e81fc098925abfd32902f055b92320f86cadc12","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205041533.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9hqHJO4hVmV9RqUoczp81BfRBX3sPI+oa+hba3nTykAIgOJBtijxs0d5gyhwlCoESKpSQTBOvMaKt+fSJI7JVTGM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4oCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp40w//YXhyGm9nsPNQ5PXDUWdL4zLwSjaU8Jmc1xvOOKtxEi0hB9w4\r\nGaie8kwDnjkCQHfBGUOEmZ987h4rNdgH0FCD8ZWI/Kv88OiCZCHADD/fQKSh\r\n1cfC8LNuDvmLwOp9+nN7Dt5wNdhwjlABL3Y2qUVokUFLLY4E3O2WQM+8O6qd\r\nTsgCSwKVJsg8wHZ95pu3oLOY/ckGFOrUAULG5SWsHi0NLHTyvZabXuPpT0E6\r\nopoYRVBB9jnNCzWhQW85FxGpdZwYb+Cc5S/6PTvqXfLlTUDk+fUaPrRvB79A\r\n5qlHsVWj8LvKif6HtUwW3vpFBbaiRYxiIcHnmr/yJ2WsOs9sss2BWvJal5dQ\r\n1vkeWCQnBGsbXG95FJkXBIiGAmW2a8fvhw0oloKtzxD6G5LXBj2ZJz0c3dvZ\r\njWQJKQ2IxhA2nHy2Kd0dzCezHsJN+BlkoJgDtHdRWnMg4SaMmkg3sFG/eNLk\r\nUkMyXYxpXrNKLQbnXp9YlvRyrHEPGVSiNi8xfIswfBu+IMIiLA8htZCQoruc\r\nCqvmmkQ5+4btiHWnsCkM6sPZ3T8Bw09PgDJk60bITfV7xt3r2u2oPGd2gBid\r\nYVAR8bTXNXLM1FjJPltHVOWcIPap7lQc4BvY9fothI/cFeF7VhWpWpWSgs4q\r\nCKSiJxchN88ifPnONaky7mpkIhAUC0/hJcA=\r\n=Xiq6\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/stream-gallery_1.2205041533.0_1651739138020_0.24889122386960327"},"_hasShrinkwrap":false},"1.2205051832.0":{"name":"@bentoproject/stream-gallery","version":"1.2205051832.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2205051832.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Y6DI0jQXZpZqcxa43zPKfo/YYqIr00IhmYMcLPXaGYfyezK1T9kE4cHdQ0pXUgoQ9XBSdDku58okeKdkFUmIuA==","shasum":"927bdd239002d7ebc60dedfc75412b64511a7502","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205051832.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKa1BU3cwGDQ5UUdnA7Bp28Ndf6ST3grXZx8K/A+z8gAiAfdvMQK8DgpkIRYtlGunH6E91tXSNvw427fsAZ77P/WA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidNuHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYKQ/+MQEoFgvF+rVUehwpB1Z+G3d7Yc9eDvNCiS27rUzOMOfTGMrN\r\nYLwLN7J44G+0pqkNg5dKmDaojE4RbWrDOkr+7yEDlWYIEQAcXxEYBxcbIZFP\r\nWJwWqWar9JBkC32BBQEZYE133wQalsNGPyyRMZ+KZiDcJhmSvmh5s0X5cDnG\r\nEqoI4wW7nzayUJYZTCa1IlxmOLYY0tnOMxxMGwaF83gjbB8qvQl71RSzwZZi\r\nMnUGw+AVcjp7TeUoshoQN3+UkOwREg3Ev9uxCaRUiJEGsX9gb5Ns3pvAA+Te\r\nDVtPuQJ6G8prbhg+6NiFNBE3qi4I0CScGgz1X6UtAgs5A6lM5Tl1lMaT6jJ1\r\nLLfbMaKK1RupdFAPe3lL4bAZTSp8KCvBlARIPAQTkV3J2WGlS/JqLY0V9pfa\r\nrxvup65X9/Fol6KWNf/k2djoXNATW0d3h8/+zisttNh16KfFJkpcI9UQfd+I\r\nnL4zUUknTAOqdsnFwk5irv6v8Wuer4VRv0LUGzUhDY3aW/4tm5YNZSr2ttYr\r\n8PvZammBmGrXZ3v9GFQFXofRJs1wXbPA1pphNbls5WDBQwIFBAKB2Enrs36V\r\nbraOH1y5C5IKZhIU08kh3yVTqGCIGthHA6xlilRSMLso8KdEKNXplhndB0TR\r\ngYi8dnb1DN8uhNSQhphPVFztY/G6nHxIbYo=\r\n=vg3m\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/stream-gallery_1.2205051832.0_1651825542870_0.6974960644432378"},"_hasShrinkwrap":false},"1.2205090810.0":{"name":"@bentoproject/stream-gallery","version":"1.2205090810.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205090810.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"3fe2ae4108e8ce4355c90640458d13cf81af160c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205090810.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-3jwJP7mohZXSVF5LZm2/lzLdz3P8+EB+jD+gL9VWl0tQWbzvfP+P4l9gTWjpDcaf1FilRK1a1evM0Hij4AutyQ==","shasum":"f1fbc9ec104113507ff3e72b909bd92da0addcfe","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205090810.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDNnV8qeMbQNII69bYkeGM4HMA2CjV2UDIL8Ge6CB9NQIhAK3qN9LvO7XspUmm8roYGybDpck/aKsTYMM4a0TVdbvJ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieiMGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolxw//cLhzfE0VbMZ1T228+CTjFEE4Ov0NFHXlLLkMnxVwdKfL/YO7\r\ng7ZIaOCnn8SIacQbExypMSnoBeHCNhmYj/yrJtrIzLNOST6YeMvdhLWkMraI\r\nZ8FxIRi9d9Tl9uNrvubtB1mSNUFH3sbVXiiQBbUpHK36JGXB2xvHZAyq0aOp\r\n57tIyzRE1Dczj4EeqfZgiWR3aF5f1go0Kbsna5G5+jR88KkLkali6A12SwvA\r\nH3ueo0PXXNSyTEMrjF32a58eE6FmVt07v2q5qwyY04EY8Q6eOFbp1omKQpgi\r\nXQrS+BR6ln7JxyhO00UYEo4M363I3Jm9JpPKzi+t/udZG0D+sxa2sewQiu08\r\nSKE4n4IPUv1KOjrKse4UVcaAY9go3ElGNYlPM41Zi2s8iooH7nuXEtfQ4GjO\r\n/zWn28+aQ7Y4qnFIOhteBzB26AHs4tyjteofhpJDrMrihuHwlN4OFvvf1aYR\r\nGmHxxPvB6Oc3mfR6NQuYgbNmZ7CAJuFcHgUgERspJ2WAyd9bqpr6aOEgjvL3\r\nzKiLRNidsW9iUaXfn6KUhb4HvzfU9aT+Gyj0w2QDzmzgqudbdk5ZSvQTL5ku\r\n5GWqyEbABsQ+kj4LLJgqaOZQZ1bO+XX/rXg8KlGUaHPOlFuqTKJi8Fke5BXp\r\nLTh+hFFs/P2RcXujRsjFj/hLJntxvkofad0=\r\n=Mkzs\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/stream-gallery_1.2205090810.0_1652171526313_0.009881925532241986"},"_hasShrinkwrap":false},"1.2205101904.0":{"name":"@bentoproject/stream-gallery","version":"1.2205101904.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205101904.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"43d879755f765aee2d0eab657533b493a025713f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205101904.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-2IWkLDW5MvEaLoRBB3qDi3R0UMBM/5tpDhnkTKc61+rRoIadN29k2nLstFZFdY46+soI2Cx4dwXnIYm0n7mg8Q==","shasum":"6fbd867161d1296f8e086d406ca4195e44a7e750","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205101904.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFv2ylfSbf4sCn9goA7/DZ5z+xTkUzJsZrzAMqf2greiAiADEt7QswTHJkzg3egOBl+z/Pu9GpwQSNQMuMrXJxyIjQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie3RHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9Pw/9HiFe0aBh/9miMMkqdHfYA53he7n2sIRzyeSOITaboYAaKE5m\r\nVMvNaWovM2FxjjPpFqjEzY3cTPB4QEgiWN6uo/mLwxRDo4BXHbhhysob/S7+\r\ni5pSabNvevNJyAbSiOHtoAwcTYdHnyBttPdDardo/SPyEgYlWpXc407NIvV8\r\n2ORogHhCKaeIgCFXPkGW+Cctd5sah/Xo/xHBki3HMM6d2BuFkQxCYCfYRXeN\r\nimJvXSa6glDCxHdjU/9Bf3+R7PpLGdbhYDA3FVwNLs4+c0XiI2/O0TFLy/p4\r\nbjXsTj3PhrhOLflzFWA7ybWoxSBMdZ4lrIM+45o6WGEKYfhqjKUSTChJved6\r\n2yYJ3V7I4wBD1CJ4MtUR18gmNWepbBW3W2gCC8JXUuiszgP20g1und9knHc2\r\nUnYAZlkjTJJpUEU7h0FRqH0/AP2tH3rloDeCMAVDGAh0STl47KzLWbt/0MUU\r\nvv1oFsVQA0W2q46Wktc0EfU8l898wVkYFx5DfL0WemAbqvwRRY+trE2XkopC\r\nrEMUT+PNYY6YuLUftHOUM1tBGW31+TkLTjBmODstqWfg0nGCL2nFlf4AbdkZ\r\n87waSOCvL1EQ4T19h9gA4e4zOHQcIahQwninC0bPUhnkaEXIgCMsQ5li4Ns4\r\nCs5tTLiS5br0xB3g/yfhV0zngXRWx0DtmmI=\r\n=9Njv\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/stream-gallery_1.2205101904.0_1652257863699_0.6837831778431609"},"_hasShrinkwrap":false},"1.2205120110.0":{"name":"@bentoproject/stream-gallery","version":"1.2205120110.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"46f34860b9f501caf0eda81977d1ae3aef4a947c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205120110.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-a3fGLBabqQQbTGtEtxiPt7nKHmDLI+ugp2ij7WUtXQcK/PQCIdCu4MwM9YwTE6ramEr+DLkSJ+yY/AkzEr/koA==","shasum":"ff84c8f4a02a1adc0384dadd4122ca1f3f401606","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205120110.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYDbtqkAQUwaNWBriBVaDohzokjKHDVdDv+E4XNK3TLAiA5PtyH6wdX9NCq/ZmPLcdpmJYtrdoowsCApFoi8KBVsw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifMW4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH3g//UVkwG9jLoo2QeXNmD4VkuwltQ3MmN9GYOA3OKX38SHnPCNmW\r\ndSVDX3RWs0VYJ5404cMGIE1ajehBOjD6e4BvOtg//wOqF76OnOIm8+wY8cyO\r\nHmMYVlxVaxD2xeS7E8R2u9C0Faf9BbK1TBXPoeFkn+zNyZy5/rxl31vp/Pza\r\nskt/BKqfTT4gRNSxVu0Pc/HChvTlUEdHa6GtYAgEmRd9i3MaIxJuQ7EVtxgW\r\nl+s/Z1fHSinLgIOGn0Vlmi/SjtgvuuuZSNUPgwhIMiNrs9wgXFb1DPtlYwcG\r\n/S4AA7+azFzPmjruYCgoYLom+eKcunPmyyHe/yyCrqeGcAeYvstxZai2IXCq\r\nU4ZHVfYIQbStM66vbMbjyr2VF+pj1ghdUKkd3YN+qMkK3pZEw8o9JqueYXMO\r\nyW5YY4eG3tTZc2JRTMgZDLiD3l5Ei1nAme4PezEbaIXkeS4hANKSd8GuNZDE\r\n5ahhBdmRyinDECu0+fFwEt2RH/BSKluFtHOLGgY4bpVxyIEyT/OVMy8jLpWx\r\nQEXzAfe0zWg52gqveD+IQZL1m2ZGkYF+haK34/4JeteC0qcg2FpUGpwY+rwr\r\nksq1WMLI2AxcKB/wMYdZa98dwVoib6CdzHl3+tMXMM0qDB4qIISQsaxdwyFp\r\nPR4QM/kkh3+ZcLhqv9oBYPfmIBs+Or470yw=\r\n=vGne\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/stream-gallery_1.2205120110.0_1652344247878_0.5001481786332682"},"_hasShrinkwrap":false},"1.2205161914.0":{"name":"@bentoproject/stream-gallery","version":"1.2205161914.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205161914.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"2fb4e151488ba4d856b33f836151d66b45ca457e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205161914.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-cJrMavn2Ka4LXOKblds7TFKLplxbwPtVlm89wjd5p7JXX5K/9+6rD2sHhEri5jydPGsCrPHddLcak9Wz7HurMg==","shasum":"270a3c2158223e06ea44d3f166d4aa3024959a1a","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205161914.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD07nNUZm/yyhaNPc4+ZzQfDnRHUw4DTdotLZbJ4qdO5wIgTmOPA7su3U9xsb7nSEV64mRwG/UvycmgiInv8SBLxAs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1wgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6lw/+Np8zpMfqjL/C5bj/IgO4OBwHlxz9yz7QXJeW4iJAiMorvOzB\r\nTt4nFpKrPKbMMCF+dhPAQlqjEUWsYAcsdJWm/tlVH9wdvy4XHqD1mcYdJnMn\r\nioZ9kPw/U4CgwjmYXeci92vgL+gcFGfEMsc1/ILS9K/xAIIivf/LUP8ZvOXu\r\nwA9fk7hdwM0FMLEh4HscbDAiFn3CdbL9h8EUdvk1Ln810hesrD2droSJR+dv\r\n7DHBJamWPWC3jZemroOCOfZCmLACEvW+fZyFBdD/crQvQnf+VHGjyaEcWsaA\r\nKhrNs3tIPIiHM+C9A8Mp+98JUONOX8YCkiieiBiC/FhxR1p/5t622cEntjrT\r\n5A1CvZ6jipaCQ0Mp9mkX9h8Amm3asNjG04g6iLOjOm/9JowOOZf4WKzJi65d\r\nzqggKMyXDtJ7zBdVFTwFHvCdhn3SNy/FDiOeL6folrcpL8V3W6nACScxLnAK\r\nV2K/QUtpUxPDFE6766zt5X+9lEZhzyoDuYiw54v6yX99jGhIr/OVE36LpkKm\r\nIVbBOhlcRnZ7HKjh9nbgWYby5oMlT1ZUobxxM3LYSE/VHpo+EHd5JsLU7l1e\r\nAaWIjPJ9SwZo12i27HV0MDLWMYFvnWZjoTSNUn+8zU/AYwOAQM/xVkEJZZbs\r\nLZqiLjCyNC0O/IyT0isPCkeVHCpIW4MpyaE=\r\n=i5QF\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/stream-gallery_1.2205161914.0_1652775968142_0.4369688465677162"},"_hasShrinkwrap":false},"1.2205181800.0":{"name":"@bentoproject/stream-gallery","version":"1.2205181800.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205181800.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"fb3f61c46e2221f0f2e1dd836127cce386c7bbda","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205181800.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-wKF0Kpb5LrXArhm4agHRl7Aa57L3WzuURe5MN9KRbLMSI7tSZs5W6xHBA9IThwk2AtW2oQuZK0zSgq7JH7paxg==","shasum":"59bbee39b3e05ed298209926cf2b404a09782276","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205181800.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDK7QIwzKQRKDsANyCTf10b51Cgw5ymuPrrfTOf4uxm6QIhAPv9IEpbvW+8vpRIyRl6EdDjbGpGW4Q8KO34Z7rwnRDc"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihf89ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmophQ/+NPEDPLmNTbCkxShZnw3jlN5qI3By9NxVKyP3POzLvPKmgqe9\r\n26LqZkoQaEgeF+4M1iu8L6YZvqZ9uogcWQG6Lr1szYz/XrMrclb+O/2/Gk2Y\r\nYg5vTZ5aZ/Y+oRgBKPtry7/DqNpXtrswWxH+T3cbRzyF4lYAVjXzbHPzxZdN\r\nIKIH/VfrNQ9LGsNadHEXmy2SQ7tx5SMlt8LVxB7hTwxfwo/fRMXkfBOYx0zC\r\nY0Iqsnl4j485URtRmSZizQ+zMAhQC5IDt9DQapm7mA31LZHTwVq+Swo+X8PL\r\n0j7/yKPyvjyOfOYokaZYf6NCG83juRaICc5nBdYBwZR7PhTLPnXO+/b2DVTv\r\nB+wsWRigJoo56nSDNuKqbIHS0cFM4QB5+ITBa33kYmhoyg4KHuck7Z9bQgwB\r\nU1z0BRrMl5+K3I6b4c6tFGf9rXHHgw08mOCZG1sw98I99n03Qz/goSHbbm6J\r\neL1RtzzfxDIH6TvHZ1pjNNV00euHU2ayWG+xhqR3jrtyfTk48UNLbzG8MJHB\r\nkSjzzqH+Tmd97lbN0iL2NHz+w2/R4ztz2fI2FB4k3sF/0gHTZAh4lOQEjH/Q\r\n9gIOnoGni3EAhfInz8xDYMy+AcQu9p+rwyEvt2aNW8pyQ1P+wC5IQOUEt2BS\r\nYVr6NaS9OyGFOBftDfhFZLz8ZJEoHtxNw9Q=\r\n=/9ui\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/stream-gallery_1.2205181800.0_1652948797335_0.46239517639396777"},"_hasShrinkwrap":false},"1.2205191749.0":{"name":"@bentoproject/stream-gallery","version":"1.2205191749.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205191749.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"83c369066eb9c7dfccb12aea936f29a84bad30fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205191749.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-RrYKDXVRcZ3M+6KXCXiJ/5jsGisjbQZ30GDpGCewL4VoCzxVb0RovHgkn1LjgyA097FywbJVADGjFaURMEghEg==","shasum":"abec222ed221f7ecf2e252e268d9dccb1fe1fe3a","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205191749.0.tgz","fileCount":31,"unpackedSize":1698470,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLxAqNTeVU1FR8ZNO2ymDTBT2cMc1YZRgX7zsYK1zrAQIhANIp9B1QwNPjVS5BSXBjIlhHG66LPPr9A9/Wtu86BUbg"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih1C3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpVg/9HvcKKPoMBuvQw59ydRz3PEVsQ/J0WxMDe2yysBpZ1Ao1rIL9\r\nsiYJgG9AXpDVY9WOXiRNKTlh70ivM1vHxoiA7+e4J1pZfdCM+eqz7i0QLKxX\r\nr+02XP0EL0r16LwGT5w5RSSRpdwX60DO4qGmQL3lZgxmcjrKSqoZxVwKHpVC\r\nlnXIht/miyWuW65YskKK6qZNz2gnVS/EiyGbpjPkTTaXw6twZrvg3AANiSzh\r\nw8ngXr+Qe7h+Hzx8Ze/6iJsD2XuRary51/zIfzZ5D51pMlJVBrs4PPsJqZgX\r\nStcdGy4xISEVegq/aSF3egT3GUb1s9v8xOIMWBOmCpg4St0K06Bs9c7xKsOZ\r\nV0bwQhjN7bTW89N3gUB1MA0zhi4W29dDTagD1o0esYcitHND6lHuQksQqslO\r\nMqkb2cFbDWAv5BtT6vCAbE0znXnF39FaNTTYi95DXgD2rXie2mWGT0EQrM0x\r\nu/S/d0tAf1pa3ytJ/6r416vHwma/S7GpZlnBQV27u2BTewCRo40koSjHySg/\r\nrWYpfR17C0GBnHMcSiYa7rBE7bSD/auPAexpCrfysnUOZf++0BwxcaLA0ugv\r\n3DmxGBbbHX6m0n4ATi+K2O/iSpnlyhxsqInFsqg0rwu1SxJfVKWXn3qE84zn\r\njE/MXe4C8oBvLRKswPAdaUv//68unDqB/a8=\r\n=pUgw\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/stream-gallery_1.2205191749.0_1653035191067_0.18299415064342672"},"_hasShrinkwrap":false},"1.2205232225.0":{"name":"@bentoproject/stream-gallery","version":"1.2205232225.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205232225.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205232225.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-HRt/ZwwZGRV+JqXLyYhZYqlhU3iW+fNmskjHDGI2RP7OlNb2ySiqhf5BwWL5t5EV/9nI8FBusdiTq8bwg7MMNQ==","shasum":"59fabf5107bd0d76d2626614528d272a89b400ef","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205232225.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPEQR5XlaAb+xg/xrOUrL3T/azeN5iY0iLPz5G7uauaAiEAsr4kmfDg0TkPjxHmVkIJfUvd/JZDm1G5AP+IYjI0NO0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJZzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRkg/9EgTRjiI77lLTeCV8ryh5x4hqZf05BB8tMhi1mu+J0YNAZsNz\r\nAvE6qJrSRY/t0VINb2j9Fz1f/XXPYLFr8OLz55SpZrXfCTscqd7ZHsUEGTSV\r\npGPn18Gm0z68KGDNk6/hrVh7z8ksB+JEYm8UrV2txvbsYkfvW6N6HjCJ57gI\r\nOvgFRpK0ic3ei0yc4hOtvdW7WmJCBf1yjW5xe+VRVxc9kKYWj3nBCBeoFbcJ\r\n7iZBcuBTSYKjX/FSXr4UG9ManVeUzwpQVEhK++BsaCCrnMUuiIDkHSTerEkO\r\nTlr79v4vl3lhxwiwO6/4rrc6HLwKhIPojmGI6fM0JAlOK6mQTFmuAofrkH1F\r\nb0Y66IkZwKgdI90A+m84SehDuSvmqtAi4MU7umguGjlzaWCgCkpGGpkxzs4B\r\ndnBg8/qCsQlzXRSxlPVpscIJbg0YW+Hl2C6G6BnEmWHJBPDKLjsTyxwfXpJT\r\nxnxEjSf9/nCQffoxKyW+Qy5ZKqsofuwKJdUGYBmM2Zc2HATu881flDyDe9zq\r\nmcf2p3vpi23XV9ipwO2PjqO36mvxxznJg5T/KJMKFYAgap5Q4lFYoTMS6/7+\r\nCIRvqEQ6BUMN1tLMdJQ3NWm8bNpPem2ZZLiX5llBc45ijsycwUGaGH8HJP9f\r\nT6TCi+hVcYK80BYe1n5EFDnXE61Mqqt0WA8=\r\n=IGzz\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/stream-gallery_1.2205232225.0_1653380723448_0.9101083192995469"},"_hasShrinkwrap":false},"1.2205120110.1":{"name":"@bentoproject/stream-gallery","version":"1.2205120110.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2205120110.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ZWib+kI/2H9kcw2jVJOr5LhMcZtQQIN5j+L2zeX7lG2wO0m9B1JE1VECE9QOOMS/LhTycgT9ud5ISYqUwW9vsA==","shasum":"87567dab63525eaa4f3b4e1974590f6d6548ec10","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205120110.1.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzimEcIYAUFJOivW/83q7vKjGJoXSMcJs9On7qZRYuGgIhAPF0y3PhPb++4DYi0vN/Dwi9yt4llGGdraQ1Ii8wQi/P"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijS4lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzAxAAmpJO7QQEYELHqKRvZx2fge028bN++sHpQcSkSkZ6ywvLGYNn\r\nQatls/SWO9NnBHr3inp83hnMfIwunHWsdEgPM9Jzxm9ZavFnE0Kt1kpZpZ/W\r\ngB24x44F/5kVeaMqMuVoc4lrAFhEvCBJEUpToRJITBc3IlByPvpB2Wv8ZARC\r\nErmny72SPCcA6O0yTWr0dhp7YpnsMx+EEf7t06QQa/2CD9VofqLJ8/hRuIbZ\r\ngPPQqHhXsKLFDtpGNzkgfi5HwC4CO2NDQDa53rS0YIExtZTJqcdqb9xiK3Qb\r\nbV1Wu9PlQkyUW4oP9nE+DB/Sr2FvpRnZKbLQ4x7rPDhfxyAws2ByPA375u1e\r\nbdvIZ9GEYnmM4FZc4SUVwUl/mDB+U0a5K3joB9rrFALtUkwNzj+PY3H3b1nM\r\nlKxt2+klCyahvfhozPuxKWm6/JckJSNwgVkya/cZYskL/8+rnKJ6S6woZQVB\r\nuprFSUNqXiGwp+6I3pd7YAOG4BN1K3Zl4TdjUI1WACI26eGipQKF61opOfMJ\r\nGT6kNUQS53InznB2zmt+n58LZ923qDMgsafXvDAn0K5+3HU/GeZvemA4yA2I\r\n/Cf/5gPhXAsbJ3H6vYOR7UmH0aeCETFEBEBc62kbHhOBQJXAAqiP/f545s83\r\nPi7NVC2NeAtEYy64RSeISOP5a42egA9R0cA=\r\n=odyG\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/stream-gallery_1.2205120110.1_1653419557697_0.7643936548317161"},"_hasShrinkwrap":false},"1.2205251942.0":{"name":"@bentoproject/stream-gallery","version":"1.2205251942.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205251942.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"e2f9546e2689785f0d9b4ba72e61759323c45bef","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2205251942.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-J7hUOdJR7lKfJd7RvSICr9NzPVSz/1BkjNzRuCNncKzPSNV5DCYN0oymscIlCi6e5KB81cWsq5nOQIn5vlXs7w==","shasum":"efc42afe0c960c97beb7f524e243b9c484787faa","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205251942.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCetw25WVTMN7xStbnXkPJ0Iubr/hlUMGQfwTlK84tl9wIgY2h+LJyspeHncnV7SgFnwW6jZ/cIsyCdKbkPvhb0/1o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijzmjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoElA/5AYDYZPF/MRNGuL8ZcjMqAvmCFLwEUdf/Bmg2YmMkE2gIPLMX\r\njoPsV5tqaxl9mdsR/MqoN7N1RXicFLjouRPTlWnEC56vv03tQNisuaJ/B0IL\r\nYzgh2ftFi8TEpbj1tUGwzEJz2wp60Pw+5zztoicrRnp5VdOPHdss8oPElqK7\r\nLCoJgz+cntD0T86N3BdGaAOpLTOHxERiIkVGp2hJdqEIqc//BLr1S+B25Voj\r\nbiCu0ybESoNvfwvUfITFcgC5p2tIGxqK2K/hd/EodSf1YZhGUpDKR4VVcFhn\r\nTXRNTCv2/sIOTw/Ls+UixPMayiKM4ssibDR5aIkKsxzAKGpowN71NmHwi9vw\r\nmQqhDxjx0LL8Rq17C6KBSecUABxu8r6QvHyBy/9asEoBQL1xb/sBvD7qfo3u\r\nkxvdwS9fYO92MzV3e4sgMrAcY/fMcu8WIkBfUfOWMKc8yBrUCKu65W1lMu7A\r\n/bE5XVMH/wNBxYlVICutTL9srMJKStPe9/xsDsoR5DTvqwHRF0wJvPJW4+he\r\nS1IZNmKK3vSgERGXUnOYLSAgEcw28rDhhoSjousjV+rctDBRA0snRqze3ssM\r\nFC6TQFt9nj41jaXvJrd7wVZLMW0IZqVlDjyG1t2A77I+cy2sdU6yFV07z2VL\r\nxRMIZnTtFdyJ/UyRmK/cgpS3UUqsLVg3hUg=\r\n=T85S\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/stream-gallery_1.2205251942.0_1653553571665_0.068070529542261"},"_hasShrinkwrap":false},"1.2205270638.0":{"name":"@bentoproject/stream-gallery","version":"1.2205270638.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2205270638.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Reu0IfZx8cfXRu0X1PaFsveLOLCcCVaNHdPtke9HylMHEBDE/cBG4fCLhJ+i9TXFD+0edwqPTLyF6V1bQdbpxg==","shasum":"1cc90d7143c72c6d9615a85c9f3c252882ba1e9c","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205270638.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs6ZqvEZh0Z/Z3YKmQ4sQP2XwYzl/N4ygOOIsGY1FhdwIgEMVpgcyhMXwJ77B8w9/dOA+oYC6GTPCcmWc1OzEr4A4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikIsKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9gw//V3IWO8RFElqyeEyMUfV600ec93hGMo9MVh1j9pY0hGb0XZcD\r\npx9fs7RnOBztTTrce8fxo7N9ajfSyd25ZTv76mS/YlYXTR+2NYwH71g4YTqB\r\n83tH+bAJDTfCXTSN8+TFOXyY7Xmvbi5zv9UhMg/yZtB4WyaEGsUnpfBSuNw1\r\njtyfyq9Ez2wHIVvx8iK/eOA9CUxXCSI/2CK6qVOg5RbcnXunjARRSVKLPT3F\r\nSi78MaZ9/WMnat7awV3tR5+kzJ6lvWpeanQeA6iyKPzx+20iTmw4VHCM34d9\r\norewzwksaNL+UzluSapwqbQJBXwiZ6vpnXtLfzxOBz1e7mc2jfry6f0F4avX\r\nDxtdQxugIwDgOLBO72GunSdMW308CtLtjH3HY3RDydpUYPAUrpzz5q6Yh308\r\nN7S0jvV9agM5amW7Mwu42lGbH7Yj0HkMVJNSGvx60s5IVO5rEpmU3BFXdiPe\r\nDxDGN+oP18gPfAMRHtDQHP2PfB5WKbFd2G/HhW/om3XWED4p3u9Gq+8YPJ8P\r\nzzXlRGIR/UiJ24jcGtGdFZZPqHOsSJFDEyHtNqJ4R2CGxNwVJFIVS8jNnQQZ\r\nauZhdyjlJuAMqNStsSZhQvzBdHnualY+rRy9ksFUFO+KTeB9H0QX7lNI8yOq\r\nD9vSLnBTvCTUAgwniPIVPQh2Hv7lEoybLTo=\r\n=vlwO\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/stream-gallery_1.2205270638.0_1653639945913_0.5116399971613108"},"_hasShrinkwrap":false},"1.2206071918.0":{"name":"@bentoproject/stream-gallery","version":"1.2206071918.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"f200c815cb7bd0e1495bd9c338425aed1887a459","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2206071918.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-GyDltI3UVI6j+AL0W+jhmTTqSaHXz/2vIG1Tr8nHU3mTN8QsXB8TXyiOi83l0gW02Y11OONYIt/vl7VEEKVelQ==","shasum":"0a66cb0a34d1ac2b9f165d0e3b28bd538282048b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2206071918.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbGf2haz0sHQd/40sJtgT8/msG2bftb3Ala/6EFD7eBwIhAONoaPhz0eUJlrdQRz6kpPH9/3OkG0yp/8VhNM2Mzo6L"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin9CqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmmQ//dDLgha+2txOQ+rbJvGqjNdh2vsByae20HgkonnyZ8bkSMzJN\r\nwrN5uMw02ngyjdoGUcJHgPOkBS/wHcvtLA80Xfwi97YFcgdd17HxFc2W8Nbe\r\nAHU/YybER9TTmdLCL2IcQeftzoXcBLr46nh67qHgde3xOFUWkuh/PHFT+1O6\r\nn4uTSYl4NXTfgk7w2mWHJCz/FACiO3m7aOGEerqqGQVgUWfP4lYGHeTIbCfn\r\ncDmQoYgnGAE+MnWzXDda/hRFcRg6Ux7N7Frpc8UpVTuUFMdIcc10LTXEl77r\r\nxCGnen+SXbLikqwUniF2ZB5GHD6UTpupp0A2Xj8Ik0z8CTZOkEviT/XSa99f\r\narPcxFnh4T4yjy/dE38dPyDQRZG4tR8txKKFx1rHTl3eXyJUui/FGfY4tR30\r\n6NHLA+px9iCAfuCQA8xMXNQolNx6r0x2rqXYo/SO1Yt5CWPcU1BFE5aSaVFI\r\nH3zFlIpIAtr50A+fkRh1tRm+Gh87VWI9u5yoHgdzIjD6G+nBJsO0sGV4mE3W\r\n9ggQi7D0Ffk0TCknmvQWqEUDKx1y9gzuHDzQqzSOlD4zr8b8p0NgHTN2EsqW\r\ndxupJBnhIMdM7yGvCSNdoVw/kNZrrulcYcSXuIJK0mVH5G9DMkTavQuV2IqA\r\nDE4qqab13q/IO3HwezaQVfU3QzHl5pjXHsU=\r\n=j1FF\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/stream-gallery_1.2206071918.0_1654640810719_0.9162431816802203"},"_hasShrinkwrap":false},"1.2206072228.0":{"name":"@bentoproject/stream-gallery","version":"1.2206072228.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206072228.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"9cfa89fc95b4eedfeb00b4eec539909f0b0c0f6e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2206072228.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-kyqZYiwPu0ROG3Uq24ZBklkA8BN8bTEfvAkvl3HmZkC//xRmSBGx5Uf++5/sDJ2fBuAd+a/hcxzeatZlNyEStw==","shasum":"346ba2485485bebabfd5be54d43bd0b30982f4f1","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2206072228.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk1udB/yApPP8k0K3Qh+MKKDlwjLr754uMBoOc5me/DAIgQOGxY1GAN+LjGXDxX1+V+MhMAW3zXHcg+AB2xnGHx6Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioF0xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvVw/8CTyXJEOEEPQwiwh2O+kTAcqClj++SiO5AOUS6G5+Xn2/oI4Y\r\n0X14SyPNhzcZhHzNMd3zmzyrBxlVAMMuzNrLTm19ULhROYsWF6pMyrTOge6s\r\ngINz2LVj8lzs24k0ZO7HhLq7d4Gy5Xrp8XYCOfFGZJdyY0EhJRz3tQoCx6nW\r\ndPmHAu8WJnKZIe2PMhGHoJCr5LxRox/y5NMQeouYDHX94JPPZqE9pDlg4fku\r\nwP6U16qaQB8Ck8iugecJOhjZWc/QGrs9f6F+4TfMcOmvN41WrPPjfSQaCh+j\r\nubl+tIpecFsoDaGKxjCHfzw3iFPO4VGT2Smimq9aZZtkdDjOQmK2jhRWoXfQ\r\nyv97+D2AONDSfQRMkuMgxnVtHVNQTH6wsywPME5KgslAnp+xzKif0/ncUyvz\r\nGtAa+8frDuCnfrMzGryhnZ7NGAsAO4ROOSjNfAiXKeuHVNNYxP5SzGGkl70h\r\nsrUkd027nRegVC5NTBPG3RPK6POzlvg1YEq2/PLgs4xBLrSPP0jg1vRZ+8Ba\r\nWRSpCI1uY6Xci4F+Tc6wTqd2dL4Kx3M/pFgoNdoRzORUuUDCPWsKLPsJoxtu\r\n8HsZcxq1v/lWjTbQV03MMCS6x3qPu+CQ5OlnLq4QhREVAwV2773X3rJfuuTh\r\ni8UvJ1L9pfhBjw22AN4Xvy2/Cn5tiv1HIFM=\r\n=xV5X\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/stream-gallery_1.2206072228.0_1654676785555_0.8048784798968815"},"_hasShrinkwrap":false},"1.2206082301.0":{"name":"@bentoproject/stream-gallery","version":"1.2206082301.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206082301.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"32e83d3790f33da4840247d996ed3f6b256a796d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2206082301.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-/fpxnMXoJpIBovn8LKrjmZIIEXE263Z+LOaSDmuQY3Qkq4HJ3aO30TJTAtYhxMThEkr1MCaqGVv1oefWb8d7QQ==","shasum":"ccd20545d3b676e234be6169dfe29e30c27e7341","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2206082301.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDR5+5xhzsBTCyNglxMZmJR4lpMLWSyWdD3FMG0kh+TQwIgOCmJZXbiHWV2qwZ96gut0eb5VqtgxcTapKTo9HVD6UI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioa93ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoZQ/+O9HKqeigDuddo0AVKyQC82TSjuztfjl4/Qp3UISfkToJ2dMy\r\nfWlvCRgFQBLDw/9wgoJU+Vultvr84YXWs6Ekgsq3UzOjM7ln+bVB3FB3fz6U\r\ns9qvIT4r0Dg90IngYEr+2fTJJZXF1MHimBQ8wY4Rbur1SW3+yHStaxwcyF2L\r\n+OY61oPnREXUVgcEYoXLwW6A4NoD/8pHdmGDP4IFP8aPN5Mx7K0ra/18B+PS\r\nS4xUMLTMRB55/mnmvXJD+0cXTrmcmbUXE3Aso3/a8d9v5ytTXyUxXJTk6+A9\r\nt91oDAMk81TZjKX1+VrduNoIah145kqvisYiLTchA9+BEiqKP8QXC4C2f7Wj\r\nQlTlrnC9ibUgsURfr7h8P0b7/S3/zOYTSFR0LKtINLMOyvPqUTm1MXSGI5+L\r\ni7OlE8n2g2faRPvvj1VAoeh7o3mVy1241brzkQepMudxoW6hEv2QfcmTpw2l\r\n3vViZL4GY666L8fSSq0upSZMAYTEOu4x9vjeBhIfpbEX1aK5kt3WPZJUO20V\r\nHJT+B2s3alJBQECD5eiYp/KNEHUO+4P5Zf1QhwU+oLRWJB1Ujcd8BR7cpCBN\r\naLs2RhSsLAxoR+eLZUrspK+Jgq0BPgq7GOe2hXEhTaRI2RnnYhMblLKWbYTU\r\ntym3PetLRl3B1a/Cg2BzvnHV6OoGGWX3bRw=\r\n=mjmf\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/stream-gallery_1.2206082301.0_1654763383352_0.6067944998555241"},"_hasShrinkwrap":false},"1.2205270638.4":{"name":"@bentoproject/stream-gallery","version":"1.2205270638.4","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2205270638.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Kd0cVLm/6rBK62Jnn6sxWudve0UEgCj+9oOv8tOcI5qg5dk/mDlIuMUsYH9FWS9uD6NZi5bBJxExYgm9c6TVCw==","shasum":"d6af6ba61cf7efaddbb3ab6d3344688e5d85b81f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2205270638.4.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6YLrh/bwFt4Y51e2Ns9WDVgO02c/Hpag/SIAudU7yNQIgEUyp84s4gcfYWaoDB3iL3HFOWAB2xqw28k+vQqGyddk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio7jaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogfBAAoi3l6xrM8XgN85wV/a8ciKYJmoNpIdaHzlCOwCi6k7meqBGW\r\nv5VI8kECae4dBwJu5PRaVDhdVM0fjDoC01BVJUTboqazz5YSlg6BjLUCwj9v\r\nG+ciexJ+NMCuIqiqsVJHitCamO7AN0Wdfzuxg0yotvDRTJ9PfOYkEa71pUbK\r\n33ObXt6PmDiCtGnNr0LjCjCV2y2J8HgsODDoMIqeQ4apWwKD+PiXKaln8J0H\r\nnZsRz9wcm2VLBdqLALkIY37OxVnBw25gv5qsTcZdVM+fw7+YXOvBt6fa1R1o\r\nmj6VcOcUJaywiogtlxQaIv8DrZcjqeSkI8aNGDJhvPNvPwPMkAEh+1scGSzx\r\nkE2SQTKvdzTnAb2Tme+RrXH8w9n+CYr5A3Y/IU178eMhKYQCp1YTbOTJHyHj\r\nTeqMQQuAREDNB3UY91XAuX+Py8b+OTSv5jWvMaRrxuqsNr1QEGuOJe0hU+8c\r\nMdPp0UplzvlbYZcjyxLXgf8RXl+88bb0CsD+jiQjSpP/YJd+LgS96a1UWun9\r\njiDSIOXJljsFI5YNtIwtdnjwG0e151ayQOvuhVF/4KTJQNyvMa6WIvA5VPkM\r\nr1ikGkl3yOJPxnffbEmsXDNmfZmUqBHhL/YLArANIx4si1LHgEpnc4HbUI/M\r\nl0vwWSUXquzegltzLoLU6mMVOn7HJR6CfUU=\r\n=cos7\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/stream-gallery_1.2205270638.4_1654896857844_0.9393665535715638"},"_hasShrinkwrap":false},"1.2206101637.0":{"name":"@bentoproject/stream-gallery","version":"1.2206101637.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2206101637.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-/gJLauhBfOBBKu9wao0Qmo/tZQ4SgXY94aGDqBX4R7Tc+Up1p6Saz5VsjHP/ZrqgYzP6CWTEnJeS+Wouh1WBsg==","shasum":"265add65a72086a60132d6e14376f85eb163158e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2206101637.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdQL3ODQZ7K4PV5yU5/NM+t6W43wO3v3ZhaSAkNJn7sAiEA8gp57oc5MqlS6ooplgLfPPz0wWxDSRKT72oCByQCyLs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipFG0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDag//cR6v3WZ2/bjM9i1MZli+0+3F/p2zkdsYWIwbieJp7/wHk1C7\r\nwVagowVoLlM+SDOsi8wEUjTdNeOSGOK977X7CL+zFQYXc/eS4TciUx4ZRrKJ\r\nFZ0pXN6EW8mAiTCMVgo8HBojDLEHdR26xv5Cqr0t4ThQKULVlhA+I03DG9As\r\nPeu9qNyyrXADrNvXUIXyoeWQXt8zXHYKpG/PiGjkFe+LgUEmCO6Oxb7w0yvv\r\n1IHrhBwPEiAokWeImjifgJuHbGPzni5ooOQYmusLhSw4zZWb27wdiXE5EPbN\r\nIwSoDsgwVudZT3DD3gIDrzK+fdzdNYu9YEL0+ZADBs+ecDJCKscWaji+9Gtx\r\nSPcaVupQQBRmu8Uz+7mzgVE3tH98ToyEsC8cT7MEN9dZ4+sqwietu7JdunaR\r\n+DTEe7Wg2tolQIPEvn2rOZ7idCwoKlnk+V+WCwGquq4Ca1yplj3QEQ33Jb7y\r\nJiR5759VCr+l2rZw9TGKYTFgA7DOsQgZ/cizoGEozv0vg/9ZbKj2g2dHaUuw\r\nwvwuuXZ3tWOq4qc+pGcdLNsJjENL1Snr/iDdATx4eOd1FqBHeWYYuAjsPyq5\r\nBgcTbTxEgNrF0aIzn1coKJgBGRJ9R7RbExdINC64dwORInUNfrLLjhTHqwfk\r\ni09i7/VnSOB8q+c29sbL43d1PffibH0UsiI=\r\n=PbtH\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/stream-gallery_1.2206101637.0_1654935988409_0.5262710411002665"},"_hasShrinkwrap":false},"1.2206131450.0":{"name":"@bentoproject/stream-gallery","version":"1.2206131450.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206131450.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"f8fbcf58e78ea43df73b529ed4a25e79ac758981","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2206131450.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-2JHtCSfSGuQh84vTmnHmnpV3XHxwZ/DMMMcHtUbs5zgkBrZhcGbeVFi1VHmGSX9DxTLKj4a6t2TUyfcuBDdKew==","shasum":"ca3081cb2ec050dbac4d336d31991cc124abda06","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2206131450.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmYPuHmfIcrqEPXn6zMFYkklUFqZZFBVOjJ6GbiEV9JQIhAOUZig8hCNQy9rLSkvwVWfLDVpJXsSxwRJFkGbdZdL6k"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqEaVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpjlg/+L7k05cXXif2E2NlNNV3NOSuJb3Cvyu8DNsmy0JdJ26S/0eni\r\nEsNwUAJFNz5fciZzgWAEWVgrMrlMdOrpOrEMvJkXEMcDju87tCDxH3eV1qYB\r\nCIdjQ7/4Dplc8rfcu+eIlvJkvDnKIyTFCgBVWqkxSgv4u3R1Ep/KNJ2S0zlG\r\n37vIfQQAWMTLJKcarQjinOdvVNsB4jHgYqdFqQdxuMgqqD6+juMP8L1tqau7\r\noy4Tx4ryhVkYEEhebvbPkOkBivkTIfnomTrg0n6IoCrRL1kSbKO/lgH/2GUf\r\ntsAl+7IevwrRuZa0sOKwoF4enDfsKBk17kgHHlD8Ct7TPcDi9W3NCfJ2uZ16\r\nMd13DZntySZ8+LhlKRutWVqObjn0/5Euw/ZKiqmUFnsC8eA/Op+E1bncEjAl\r\nX24PSWO+UhWrZq4G8WHMdITviTjy1dXgf5XKmhMxK97EDKZqbljW19Rsm+b5\r\nNseXCFMMmZM015ZoY/mNMevdBJg5slNyosqIxdBougU5WGpYUBUqaS2ktV+1\r\nULAcIaDXui0bUqP/68cKyzXUWgrRT3AGdwETBGBH33zwOWsvs3KewvHIIIxS\r\n7J8EZmbBRmwTZe7lbYTraH90sSXhpYoYUcdAW4OTKuj4aXD79XQ0MUA6r7/G\r\n7k6QcvBEITPC52yCkY2wh61hxWVhsgjAPIU=\r\n=BeTq\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/stream-gallery_1.2206131450.0_1655195285254_0.8548075253303864"},"_hasShrinkwrap":false},"1.2206071918.1":{"name":"@bentoproject/stream-gallery","version":"1.2206071918.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2206071918.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-a1rK2LcKXUI9L5DqLkuyDpudveyDB7ho39u+9YX4uxei7TLwHAYGF+7zm7ESRgbWrJOtZvDEribx6h9tPTHT8w==","shasum":"6d198f0a9c46d162c033fc2e6f7800599071f84a","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2206071918.1.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDenvR+kpVjRY8xpgzwiG7/TPp/k0UT7kjxLXVvvbU3/QIhAKNhSNrY90IDWFz+C3PrwVhJp7ej2fKq+9AzFq6gVZVs"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqP1oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbERAAjy/nG0V8/8s6iIRQH/C4DCvyz+jdi/J1IPYzg2PB/X7K3jfs\r\nkNUulDDbNlcj7bxYgTUHyjqBy9qMcn3WHsGkRNfDGp4qMhcF875TPMS6XA3/\r\nQtr+WDMqyw0oCEGR9qDYRkUMn7owVJgzq+u2JLvm+ntvp7iZgTCRHirLyDuk\r\nt3GdN+m6be7xWj0/PTfhekYX1h/8yGQ/XoxqdrxUSPxbSo03D9oxYhBrKcQF\r\nSn1WsKGo7UfGzSop6YLDIPXow1NWApu53mBfgXBpoZOhrUIbWm12BqdcuMo3\r\nK5JTKJeI6wGL6U+KNiJg3VsLlU64mz/XQgcKsNK73ukQJWDGPgXBDlZX3+HY\r\n6P76N9IAHtl5PFo0cqX2ftVrdtvfjF/WiE/bhJxSnksxvOHgM4GRRAWOEMqm\r\nsWsIvbwK7fMIUr+xWC1OS+cvLTzRZ+KSBszEMTicMemMydBQtr7dSpBmjVgi\r\nctPaxGlq3TUDG7CpH4mVnx4ZZ0w2od+9CuwCxopPgxqPqjpaU9v2amQ95qhI\r\nf9VRZHfZEVq65yvGYYYJbvdGxPUyNxCEbt5Kh29t4iUPsqIftEyTmGHnOcjR\r\nRTY344cmr1u6/Wdp7i4prJKSzWyVT+V0oQmsLebGQhaEg09Rn5yo5bU8nSEb\r\nGtQc8jcN49u8PWTU54MbDXZCUnK6Jv1/FR4=\r\n=dRw2\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/stream-gallery_1.2206071918.1_1655242088074_0.08849659966345014"},"_hasShrinkwrap":false},"1.2206162023.0":{"name":"@bentoproject/stream-gallery","version":"1.2206162023.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206162023.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"15781b541aae254d04a1cc777016aa40759100cb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2206162023.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-EzWjM4uJsQP/ki80rEBOOkVyu9G26SnGAYUGxQqbfFRY7l+2tpdXyIiJKdSz4kT04OVL05jA1N+qPNPyWXYd7g==","shasum":"d6768ae027c9e09e0b0856ee474a348f5d6ed519","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2206162023.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjhC+Ju6VyzQLDaONLZMOl961aPMEDNBedEYPXrMal6AiBCbaaPrI/AoDGCf+giLheVU1AWKw0bvcVSOVf+FqZ4xw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirDrjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRfA//SIcvhx5FACOi3qghlBxEr+/IOgHPYvEfJIB5pYzmywZFpoMe\r\nhvJmoq40jv622wEc8bKY2sg4eZILgzBWewlT9sYgPXqaIES6lxJkaBMhzo9+\r\nOz+zpQA8GyqiA2CrC4+tl+nv5aDri1gGMZE6N1JoNKi64pFW+3YclyG/yRvM\r\n224Edw7kQ0xfF3UC7Tpo8IDMSZuQrPEPxp4f+XLKagaxzOCtVCz+wrDOqLaN\r\nzRvH32NbIVFkbV1H2abFQWmbBA0EDZi9jJ819oGdQvQok88fxX04C5E5b0nC\r\nZQpm4eugo84AOd2HLF+hPazvzuK2ztN6R9EndjQoM6NEeH+jO7ONNqZ8IFDR\r\nm3jmnNR/PPu56q3+6HLnLHsDH6YVVpH1HKmHSGr6S84BHmWrnnRmDUSaFUWm\r\nwpvj64mOA4WHqTK02xgIkLX+9K0OlfAFCCt2Lkr27Lm7DAuGJV+C11Viy0c1\r\nSR+oMIq74s5IB33eA6gqc1kaP8cs6jBC6pC1nmfLgla4f7+dEuguPAWLEt4A\r\n5jOj2NkK7RDlGit75wk7zDpB3nOB8mV4XV5ydxV47nm3zTw+OlmjWPhXlexH\r\n0a52MMnxWGAvyQVKBQwMEyqyrFSOUifRHZV0D+IBXQsYqa9kt62VCCJRvxLG\r\ngjdS6JXtrvgpMoCZ/mRUNrkVf2soPYIKOM4=\r\n=eTnI\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/stream-gallery_1.2206162023.0_1655454435160_0.5971100666741422"},"_hasShrinkwrap":false},"1.2206221455.0":{"name":"@bentoproject/stream-gallery","version":"1.2206221455.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2206221455.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ilkzDM5/c70huDrUUfpUKhx6xC87wkcUQ2JOUtAQuoakHIeKEG91VQKQqw8nyNtEX2OtGga1ttMlyXBVpkmxmg==","shasum":"22667935b95861df172104ea4b1551ce58209a5b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2206221455.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGKItmkRHY4FQGJio22hUtALgQFX33jumQMAv8I/tROrAiEA8uVBCKfEn2BICCQfYVU+hiQqEuvWg3E51uNS4Ya/Q7s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitCP9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxvw//Vq8F0DWNA9Rrfg/YzqusKM26rG6RzjGq8j9Jlfw6GFRw+ZqQ\r\nMbmU2UabeksvJw+kR+4TR7ZYfhX6yAqAm8PbHjQDb4ph1GT1w4HphQZGdd8k\r\nCPpaYbsHmUWWgy7lt/mnAJ/Hb51nxCb1BnYr7kSJCcF6Yn95ZDD8cdY6ZccL\r\nqj3V5SZF2nMFsvuZUBWWwIUxX0HOoLcYzN4oJ26L79j3Br5PefeK0g4r1b08\r\n9B44GC3ZkeDxgcR/JckAPnbbroyiolBvOtynGdcAFHUj0E6UzdEni8+rdtKp\r\nooZU1hIg+x/eyk+FHUFnSqYewg3gl8OS2EdWd2BTAEHQGbjXiS8VSzDfvtQF\r\nUvVyh6WjHWlFLdh6Wgyf/9QB7aQrojj6jUtmfKk71C5Aq+4rQKiyskB6J2Qd\r\nYPP1CC8gKl/RFpLQnC99l9q1FA1e+BUzKVdlNt6nuLLhjfswPAjqvfyBeqLd\r\n4nCqyINnfByuXmWDuiiRQop0HitYrWLxNMFca4IwJXO+JGTa9LU1MVm/c+o+\r\nPsZP0JduNHxwEQAyacSBBZntFuDscPixnJVY5kl2rGn14l1xNyIsf0cK4+Eo\r\nrUEYYNCh2DFcWUqhkNKnGLyM1BUS4tbbA6dqlQVI0Jq5FHi2Xb38WY5gXJHg\r\n0tNYM0iCPKzvk5dP3EzkY0R5/wdTa1UcP5w=\r\n=W/6L\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/stream-gallery_1.2206221455.0_1655972861117_0.737045607185679"},"_hasShrinkwrap":false},"1.2206291614.0":{"name":"@bentoproject/stream-gallery","version":"1.2206291614.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206291614.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"34fbeda57c3cc9d01ab3c39cf9618342ec840187","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2206291614.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ZU5oOD3Tf+ahfmni7u7/yGTe+Ewp9NyozADphjvu6pwLD1kDfloyJuliVfPlymZx7q6AyFv+ZQkpWzsTnjiOkw==","shasum":"7ab1ca8654cc77b3a1a4fb9d02c59dbe719f7de2","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2206291614.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDII8T1OfbM56kMXdmlFPMLhiI0wZGS6xpEIs/loaBo8AIgU7kT8OuRkMbIVJROu8p5okRThF9MH+yBcU+w+rix8/8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivcotACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNlg/+JrH4yjzn7l6sDKC+FUHtT0DaR+kHM6jU3PuUGVZAsuK1+dOQ\r\ntT9mQANJp99Sp1b/+Gc5GtQx5AAKFZgLxnbbDrnk7bx1ZK6UWp/oIBej+8z9\r\nGupxI5QgQ/uAARhxWSxnlPhJpWDSJMubkMP0Pl88ppygq7u4RmcTone16Kj5\r\n2f7EgjNsLgpV/PIOoOEYhTrF8YryXori/3cIYivnAnVeJUYvh1jrSBW0JK0R\r\nyDkLQ6leRXN6eZVWR8WjdlxwZOLZ65JWswsH/chvSODl0JNUAt/XR5AcK07k\r\n0CwA2q7YXkcB2P380NiAaciclrvHJr5LXcDQTlAPxqJ17IjEq5iynqoXeJws\r\n2Y86prkIKqfNN47MNgN1TrWIJk+l5vCKOvbGPMVJSPEHPbW1Oi363UXFq2+o\r\nMkJSgkeysuEAlPsVxLljcXXn1IoCQF1rtz8zK51xiuYjbHAzpOYKIiaA+mVA\r\nLiXEUpfIm7UOMw9Ekl6ov94E9DOaXU3cjaO9mw50uKgC7A6rI3HAAzCrMVFd\r\necKrGuM99hvF45ErJGkJLU+Cz2QXi8XaNluBM0muTrK8aHAFXFZqngDXpcYm\r\nxD0ewuGc3FFmfR468j9OfUccg09B/lrFYryHXLHOGUHZXwOSOq0opFUXiWO1\r\n5DWHUMpdBx3w3mIJcz2mWSwEjf4PzFGPlvs=\r\n=X946\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/stream-gallery_1.2206291614.0_1656605229261_0.7039857023454255"},"_hasShrinkwrap":false},"1.2207071723.0":{"name":"@bentoproject/stream-gallery","version":"1.2207071723.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2207071723.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-rjNObERliZEoe+8R2Bu0U+9if3WuRcbMmFuPxcaXgx9qNQDmrZLj6Mkh9WFpgUfcY7G4FZ/RcbqKOVmwybH4zg==","shasum":"8e0c2357fa48011e05a277c285462cb7860f98bf","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2207071723.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEUxCRXTvRfdkBPLYlSk6++FSjJrOfwppiTGAUG/tjwMAiBznMz8/NOYvhwJMapp790F9gfJ094yrfViDELhuyei9A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix+vXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6lw//cQnhkjk5JV0s4A9C1VrU998ZdV34NoNeis6W8xMBryGRoT7f\r\niODfvHLMYxWv5oIKl2KNfPoWEQoSp19aMvVgdkZzVj2omJeyNSDC0U699Pap\r\nbuF57pBUSkho/WzxtjcIXJtcG2n4uyhgB53yitbS7LIyprxsOGyZFL9p5vsT\r\nijN14ub1dQnbYDQK3SIS/s2PDsoDBYglGhHPFgpls9tcSXQQkLT++4q+AC09\r\nTnxuNvpkgKZ1PAVbwhdIE6mUtKYgSw8VIwdTv2YL8M8IsuGdzt02Gchsz77r\r\nL365H8LwQz2CwnM2l0uYBl5YH+UQxYgWztNx0BrpGVKeaZGr+e83pQFmSGyR\r\nCCupXBOVuhqdyvvb6URq7rorPMmGSFgm3RzF/OxEkDPoIhyLleXCOluOhAyB\r\nDt1SM1yLnZdixSA49o1/oQ2J7tOAjxCyEBXkiSqExALsZoyUybumOS9OTHGy\r\nXH1LviURS9LWm4x7h5aG/cYyymJJn0E3DqM7ZIfWMI16LYVWzbiMPYwRs+5V\r\n4dXfrLMb/GfylzUBfAp46tg1Y5ssqB/dEjM2ZFaVQ6M/jPt21agnepv1i+DB\r\nZceIhyR1p9Plw9XJeTwKgWe1gV4R9JPzie68uRoQcVCa7xQVOjY+QuB/GDdR\r\n+uRt7QIlrxPiwXkXaNWnAdIRCPT5xTqUilc=\r\n=8D9W\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/stream-gallery_1.2207071723.0_1657269207406_0.08586391791800385"},"_hasShrinkwrap":false},"1.2207181727.0":{"name":"@bentoproject/stream-gallery","version":"1.2207181727.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2207181727.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-sJ1B/H7JIsUUBZ5uRBTvMx1UreJhfBUBV4kdcpNGnCPjyq1HI3E9E2RtkrqHOqWOFT5aQU20+B2GPA6cBukCQQ==","shasum":"b102798557ed35303d45407df2356451b2abfb46","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2207181727.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID115/+08CFb4xW3dWS22r4nsw3iME75RMsKgC83/BM2AiAIHS68L4uUZ+DBkndHcjY2I1IVEmRlQRiLJQACqxv21g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1mq6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7jRAAoWSomfJJuqd51MlUCBIx3m4OmkAp7K2LFIlwCUlXZ+ndr9ov\r\nkW6+ObtBxN6Gorzy6vaQ+ZBIxDkQpxa2OU/DJtLFIhZCyoX5vbijsw9EbS7P\r\nQ6wYjYY4AtyCoyIRdxdNmKm5Xponohl6xC09rrRQlRkgGLTlVgEiz6OaILsR\r\nIJCfwtdJK0p/jRZzU+YqC1jumqeFfxs0zF3tTuomiemT1cEVNAli8XRBcJfR\r\neX0XKa1Mghr0eJAAFB5nFvGpoJ5KMF5SZ3w9NcnVs6AZa1lB42+CyHorBFq4\r\n64LIJ3Jjlnz7CqkfRdkR4BQmVhCKtr7e2243Q/BYkJI8tBX3UfbJh/J2I1J2\r\nMQPaBEnLZZT4iP/3ND5EspDOoFoRCy7J/wUFdE41+LJwinElWvgMEAoZGjeT\r\nKRSqjNpyH4G96xtiZLVrgesuO0PsHGyvE0cXWCFw+xcmTO3OwDdrcxZAQBbh\r\nF2r1FPYJyWaDFD3GAq0Rb7L8LGxwIWxMr47PN28nqv1sZfrV7soSfC+l66OF\r\naHv96ZPtChCIx3Q8o0f6U7s392HoJbvqC+ym00idT0ynKlEktus9EBC1In/0\r\nbvbj1Mxo9gtqJ6hQHc9xBYIrfUdSZ5chXxvX6+MBqh3FjB4/LEmhVmAMrU/n\r\n+bWZ/Hvx7Xsz6JK+hpt619ZKdyl07fvRxnQ=\r\n=SUuI\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/stream-gallery_1.2207181727.0_1658219194728_0.5249195655340961"},"_hasShrinkwrap":false},"1.2207201724.0":{"name":"@bentoproject/stream-gallery","version":"1.2207201724.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207201724.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"62d86212e783d34fd2dfa8bd02ffb0e447c0538b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2207201724.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-FksWbn1LZjHafaFAyuSaM2rkHa5ZqGDnZ3BORSSpLLfcS4eA747ogAZ9kzG3OEcifYd9b1YNpgaShWbOxls89A==","shasum":"f527c598b224c6f3a71bb71a3071718bacdba502","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2207201724.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOOUZurvT/+wtXoWTETQvPTXKShsbUf9tVfsbiEihbuAiEAi1/AwBAaysuC0iBbpFDhp2mXVX161S0df09RNQf1uJk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Q2dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXWRAAm3/8eujQZO6iIUM8Jr6345lPYFydGOOPVRU+NKwOhkZdvxLy\r\nkKrlXBOxlzdTI6O7q6ITktnhsya7YWCu5/zKnLN0nOP5T8b83xAwggtQrTz7\r\nrGTMMdBBkbU7hO+NOLY1Q8e01EA+RD5T4Lxjggfks/HM1CzDj7uoJ3AR8/Hw\r\nkwNfI8P6GBqOCLYTETvsWBK2GiVufhdzpQM2MYfP2ycE2VW92TsVHC7YEivj\r\nwe9NJJ6sBdgDRI/YlUtuAyBROEyNzOevixSJG8ZmGLnOho3Q469vonGNH5bC\r\ntrqIxU1Wk5xX+JQruGCBbs/QjJ+R+MZ5dtneNfuWOOMJMDQGkxQmYFThG1pb\r\nCfNDUOYBCs5b4IilpYL2s7IQhJykSW7vnh5VtoJL4Vm5i/w+3EzwnZ3nz4nX\r\nbDn2rlPZ72I40pJfLUCXYImG1SewrkI8hAXJm8eNCrGgD3K/C+T2r8EJbmS6\r\n/v1KNOrY/i4VjFV3FHmEAl/86yAbBkkxoOsxpQLxF1KEfDk+4Rs4ImshGQg7\r\nTo/9Z6mG3hnTNmDxT2lohkMzTNQYm1a4EOBMSr8GWkOiKUfqvQI+ltWpTcS1\r\nxkJsau2Hb69969sMmVeso+RjbUeLsOPeH7mVqbqTek3yzcC017BSiIsY0b3K\r\nGn/zh3Qy1F75RS1ASmfCs0uvAzbSs45A7Xg=\r\n=ANb+\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/stream-gallery_1.2207201724.0_1658391964979_0.028814224424015045"},"_hasShrinkwrap":false},"1.2207221643.0":{"name":"@bentoproject/stream-gallery","version":"1.2207221643.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2207221643.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ypqmMS511Scg+LBLyerHliC5WthP2AJQqBHRUsQ/vk6ScfnVjfMH+XK3JrxZJoB+23W4SmLcXcMtVTm0rhuGWQ==","shasum":"068fcb797e9b513f5a6556c1ee31c169a830a0ee","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2207221643.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPSkQMLksmZocV/don8u2sCePSq94WQYkbd7EGGmNIXgIhAO9kq4XShQlLvlsmGnqMgx1MBNvc4QpUpGtJ4SDgwlbs"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi27CRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+Ww//SZ9RlCSkRG19ixnxc8neEeSoiqTFQGLrY9xZvOzmyzX1sM2+\r\nJ08P6QqKfcOFcvvbW0SjbMAwVu6UCfznvFJwrvyPb27mXVcPmrAH7tWlGqxh\r\nqS9ig2AyqGIV9xoX/H3VWCxu6TH1PW4FwFbxGJjPt5qoSanjrgqhIqRtF/+9\r\niJ23nmYr+OofHsdH2Yq7pZOr/RfKAlqxWEEz3OVPNj47vPYEI0BNcsXtQgEL\r\nuofma5uwf7wz3/inPKtCirZwIVH9f/71FqSg/3wbjobguh58S815KRKgYSEa\r\njledUfNW0vJYPo6paeFRUp6jAzm8X5V2nBATVkdCmFoX3jTehZsOTrFxk7UO\r\nzdgiTjwToaXM7MjYA/3wlkTY3ltebPuM8Ru2XihyJCD5az8XQPQcwCss8UEs\r\nnZG6TiqRHSXQlUxDHDNmhPhJo1SHO4eGihBbEInWvRz5du8k/jzV0gumfaMv\r\nqBTQJlJehb1qVVHYDIzFY17V3Sf/ibvsmmqf02QjICOZdsco8tlgfwdxLdzr\r\ndhUT9xt6W+2rLLWFoDblmcY7uxNN6e89fOmQytYgvxNTFl60rZVHj19AiPcK\r\n0HrK2C4rIhb+rFnU8NjClaEDRFELeuyNy4tOj+XrKs9WaIFun6LuLNa3QQSi\r\nLKmH64VYsoM8THc7rHbHuHg1uC5+67IzEbI=\r\n=qy0n\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/stream-gallery_1.2207221643.0_1658564753653_0.08868140540649527"},"_hasShrinkwrap":false},"1.2207261725.0":{"name":"@bentoproject/stream-gallery","version":"1.2207261725.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207261725.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"b73520d61dc1a279ec10d2a27f58891e2e2d5d93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2207261725.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-s7A8ciuRKWNb8aJOgAEotHoiQhu0By3rOCWW6OXYt2jNiWNb5s0xOfyDze/woU/cN/6j+pcSid4l3eY4H0Y4kA==","shasum":"8a5a2bbbb4ba1247eeaed581a2592a3aa250e02a","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2207261725.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWe3Zm9u5gPHNJtP1MPYHAmRJlgP2l8ysU+ZAOyONIGAiEAxZ2smANtZHyLd9/Om30CJJn6DHuI/T6ooinYigt+sOM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4PaGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7Qw//aI/aXSxuDGZp1gWncab8EjGBzlNJe+fluf7UL5xiG9y1Extn\r\nKQwi3rvYWdjfw7qHtZ1u/789aHRCIc1yc8VtsyKt+JUY84bB4oF6B9uIQmiA\r\nmULngJ77dPOaOOYz4mnXg8f3HEuVWBzFEM3n1X9DewTkeaKaOtfN8DSfpZP8\r\nLDmO4jqmk3zoZ9KXGjdn1U0IFHd7Bj58mhKecpSx+oWgIHGX647P2vr97IIE\r\nRVBK2DdV/EObmfBaYRSEbLgOWLSWJCLoSWNC9pjAlF0UZgnimHMJAxs5nNil\r\ngIJ1mcrQNoWAwCIFemJvsEUg/tE6MPMUxE7xO0cssW8dxOOt6NfUljpoLvCj\r\n/ZHIsfd1xFyP+BqNv7nfvch2P78aT9lT9TN7Mp6k0JiJvBBQ6Gsp9iTT1cnA\r\n7gKxSzCFgx6vvMWsS4UEgiw+T0HmqPidlVkyWxVwPISSFS2NmBJmSg/S5kbm\r\n7gNtapUwSGxBVCsr4bhKg2dNhYzhr+McBb5D5j2CwR+S0njlVQUdmEGT237N\r\nhogO/YuFO+7RkqTVS5v5Rmu1Yxhha86RkU+iKiyidJJznV2jKLdxUb6NJ4XH\r\nEZ9g3MbhQieEtNsqMNCr6q7BHaj8ae7htykVk95mE4B2Ka7tmmw81qGsnZ7d\r\nlbhBKzQzAWZTQaGdx2FG20XSy5ISgIEpI3k=\r\n=k4cI\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/stream-gallery_1.2207261725.0_1658910342074_0.49413870594328535"},"_hasShrinkwrap":false},"1.2207281718.0":{"name":"@bentoproject/stream-gallery","version":"1.2207281718.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"5e3f3eee6148e0ebb57aabc48ef987e9b5528611","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2207281718.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-3QtDXWajV0p5KADNE25BVc8WImi3Z5KSOfYtS2t0qQLw/99DIYzT4jGEgaE+7cA44F0TSaJqNn9IoUUGCLUOgw==","shasum":"3f16e4059d7efe4a4985795229a08718765219fa","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2207281718.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDS4bFrW/PNuFbr4BKlMxzYWGSicljFaGA2bq71wH+wiAIhAOGVURweaHnnDF38/+B+BsquvYfEDh6pS5zx3oYi8z/2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi45ovACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtLg//WINajY62pY4lbUUE9nn6zETB+1F9I6kEt/5bVOtejcPsAxHG\r\nFdms7wv7IDaSJz5finfQalPtwxis06EVJiPl0AkceQqkJVZZEYE6Dj3RaiC3\r\n98oXMhdvsB53SOkQEVA7pYzlhU8lT5Ov/QVGzQ2XyAs33AIsvsubdnjBcoCV\r\ndI2J5CNTs/OuXVk1bx6YBaOFGbVe0gEtqVZ7fZDXY5BB64TJfBEbgf5VUUla\r\nCbNikHxl+kyyBYU0FVATYDGHClJ1GbWcCpJrRFPWk6RDBAnPk5CDz0dV/nMN\r\nLfaWvYq/CJFasfrx2Avr8Jm9kYFThy5bvv3zzNv4R6qQ9ijSK9OtjvbJW0wx\r\nR41v5Aut0Zbmta1Na1rpfUj+Y6R3lCUeAFXq6knqRZBr8ot4So7dfn3oR5+v\r\ndAJ2E+pt76U/wf9kiYhQ0/2ZTNaDY5u8adoq9W9OPApS+/0/ImVT0nltcVms\r\nruMOWqSqmSE44tGzwzAcGA90L1HkSRf3PIcVdzOdUVcNH6nj/WP8rhIeEkl7\r\nm0cdQMZfSfXNADkkvn8WBgryRpAw7CgnoB/LVxIpZwmZCPq/jDZd1yku48Zr\r\n4jb6xEQzHkPrGoF2vaSUfmL1imWWRmk5hLmOneqVLS0ZZWW1QTi7xNuPVlSw\r\nLcG/NasWbt+l4kSft7qkodVd9k4gxI1r+Is=\r\n=uhsw\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/stream-gallery_1.2207281718.0_1659083311154_0.14943328437562586"},"_hasShrinkwrap":false},"1.2208021808.0":{"name":"@bentoproject/stream-gallery","version":"1.2208021808.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208021808.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"b82b832cae23ff854449af280f1b02f4dfeb99f4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2208021808.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-9hCBsQl/uo6oyLs2z9iihBwT2ft+sCM+bQALU4HXrbM5EhizikVZQF61w6szvvzfOdnnBjC5TXX+Dclb/nygqQ==","shasum":"e1f94938102d7b637c8210cfdd31b6e5d99d32d6","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208021808.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcNXClf/sfG1fyVfUgVa0IFKbXS2P2B4VvlpjBbobyGQIhAK9gb8RYlhp82f858dPvst0Qc9mkDYRwQGPxs0LVyFEU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6jFIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpczRAAlPrxZSN/SHYjiMqRVUjr6O6XT6tjWLEa5LSh08rshnavFVit\r\nhVZp2uht7+0Fs8NMjz7Ufs8k2sL4OhA5MaSfhbl3VbbmLNAiOZ/9zZJt9tSr\r\n+q7yJdxZgY6eTMAVpLyS8nDxstxwvIBLYrGJchEQYqUJfev/IKLgjF3HaB1n\r\nmjDHZyJjTAPl9Ya7pZBetmAvzXPNpmx91PhDt6CbZNlISsc6hlChinyOAQIz\r\nxefajfFPql04kjWMhPIlg9di9S25Sgc3p7rvX31XUfM4+6Zk82L0jcAUlFqc\r\nQAv//oyyrt+MDKvuM56+k0/U90gxj8CIrLeBog0qaZ897F3t9ofr4Jf384HB\r\nrQGKRDdN3BzdwaykZeRmwDJ2U6eAT2dTq9kLcpaAat/z2B7GtLWNdOI7rfgD\r\nKiWIXGPp9xLeuIvoUpoxJALPVev64zwn/4FaZDNXXT6/V9QkFC9sh3w6UK6j\r\n31m/2vU2YuKHgjpMBjuTiYQfyWGaJf51p5WVu0WgSZHvXTnquZw9R9EPjeFU\r\nDdP/0UVCM7dMVMPXV26vEIIC1Hf+XmJa8dgmAZlsclxCsAycF/3qcF6bxZDy\r\nYr3B5AhbHO+WURj7TeWP5JU72psGLlVhFFf5ldIZlsV7Sv4DKr0wrlnJ1e+q\r\nTqUPLo90QAI730ePyEtcB5NzLlasBkH5QkA=\r\n=i/+Y\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/stream-gallery_1.2208021808.0_1659515208580_0.8121606181077148"},"_hasShrinkwrap":false},"1.2208042017.0":{"name":"@bentoproject/stream-gallery","version":"1.2208042017.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208042017.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"598aa15d3922507a106666aca29a90334c7b2c05","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2208042017.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-uPzgpEZikBSDfWS1/DtYGZIJLYe5yw0jzz70YU9/oG5vq9lbv/dJu4CmhCMxC9cPfZ5iG0KqyzfdMPdPDZLnQA==","shasum":"403102d8a4f8f75ccfdf375a5ef748a7f90939bc","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208042017.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFu9ZqwUHPl9mr0tRTNtKExnpKc13E9PfveILeUfy++HAiEAhIdsY2GcoLio6Ji/VJXXtDdcS30JPM881SjL7jXIDdE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7NS6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkmg/7B20qkSpCu41c1qcTRraFHCL1M1g/v3jsV+LNziGFF41t6giL\r\nC7mA35OX3hqLJc41ebgAzOki2a6f6kk9mt0yL6ObMRLEpEyLdIOn1u0Eim5v\r\n5xkg34GEBINaduozBKNiQqPriOqJN3SjDm3Ppv5D/vW0xn8ERjkl2ey5prM1\r\n3XYjtrfYQn+rVgx2rUye33NxhH9LhVMLPifVJlpeCIGIkAn4faF9I1yxvMt7\r\nVZKC5Rxr0UF/bwoCRSvg1KHDPLygHQJJZmaMu30BgszbEZrsFNtB4uSDDzTr\r\nMCr46Pet2UT+A3TgeLj0ZeIxTJWZ7IbghoS/KNfYTJoIYnpYGbKj2tGbQk3f\r\nTXR8f4zOlXspwU/ZWt1WAEw/nJKsFZGuBCrdI74ykQGZKhDB3pJRauGuLSre\r\nrSCxAU99IIKu/kRzerbY8gL2WTwu6jPlaf0Wnp0cnVi+RdDC2LnsyJuS2Pev\r\nWZFb5JJI+R+D49LjsHfzAgz9HAjdcKoWZUtEwYMpQXE7nS9w29/Id5QOmOhh\r\nxEw5HGzTGE4bXhQjBeIJgewqjpLfA29LhrRQoVbob0FoM5FKbS9de/a0QhcG\r\nWNGry3+kLqoaTrimNX8Fp3CWdzAQ1W62e7J21kZPWjuxtx0UEhFBU0biaJEn\r\nJrzYQZ7diCGp/WqSl/8mHCU88FcKbVEyz50=\r\n=5PA/\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/stream-gallery_1.2208042017.0_1659688122154_0.9916991692905115"},"_hasShrinkwrap":false},"1.2208051912.0":{"name":"@bentoproject/stream-gallery","version":"1.2208051912.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"5f50e49dee3435f3a242126437de7cc8263c2ea8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2208051912.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-vvlC0admboA9p+F8sEDZcP8jDFs5/x7oLxC8GK3eg01NMHkevoihnce5eGLZG9uzjNYS+2qXMTasQ9mXLXt4Aw==","shasum":"5e3218b0345fa604b2b867a45cf4994bf48bd73c","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208051912.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAoXf+v9mgfociqjdqHMviDwKSaZ3ioVlSWjbb49gZAvAiEA5gaeIvgP3iWm2RifqrRolXMrP4Sfe29px4JsQf1E1yY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7iXkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5xxAAjU+M/AuO6pzD+vl/Sg3/62SJf5NvjaXy9nbq2pKVjBvju0If\r\npvJEF10xfxMChbSg6o3avamv7s2my/Ae9U/FcXyy97Tyy01Dmj9PqzfFwI/1\r\nySWLGEKFPm//rjS1eEOkcJ69NswqKfVGxHCIce6cqjPgZYxHFCsp/TFfT9zp\r\nk7rU9jedboGGc4TsQ3InIuoAfeo++9glt2nKVulB+rm2X7Id/6GF6le++LWG\r\nBMeUJCESSDdSpRWTqc870dIOHIUnDflcjrL0iYoShVHPXU150SXl2sGvOH9W\r\nkiyPBdjPW3WYQvIvjhzapefbhAqz7JyGQPcRbOKJX8Jm2FlbCdPfllgqe+j9\r\ndn1p9Xh/KgiqT8dyb7jpIMKuItyFDXZUXsh93US+CMkmYyGEKmUcsnkW1Pvd\r\nXpa0b2Wh5s78ti6NsD7Tq4m+xitKtzk7EuOulgdf6ACT3Xj5WW9JwZDc0Z6+\r\nBZ6GnUXeIir1xH9ledWIpteS529cSkJRjzTf5aaAnclFLB+RYDGRuqS08H8/\r\nCYZGSs71Ca3eOnwxQdZWTFtFmQzSiv6pdEh/Pc0978C6a9F9nP7RHCeRMDED\r\nC3xRS32PeQYaI7SQ5qdZW751iw+Qq7GL4HvXTjqb7TJ83wBcPE+oCqn72Z5F\r\nuEVvsHSFPkJc/OVp2N41s27h5/haAWV4ddk=\r\n=YBD+\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/stream-gallery_1.2208051912.0_1659774436293_0.888880861137529"},"_hasShrinkwrap":false},"1.2208081650.0":{"name":"@bentoproject/stream-gallery","version":"1.2208081650.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208081650.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"beb9a33429ef933995a664a1aa534cf7ac0984f5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2208081650.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Kjs9uQrau896AFyMCn/5b6JPxIOrN2aYT8J2oDq7A1v+aYxF4TH7iAvis0AdnHPlaO5jku3fWqDesdTVyFonXQ==","shasum":"1c9be33b8a959a49945f4ed0cfaba99474de0038","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208081650.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvhKQiqzxy0dFIF9mHarkIxpImdtY26TjTQW8ezSDzdAiEAkc8If0e82WYxTiHfu2p0gLv591FPZPd6XmJQXD59WQA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8hpRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm2Q//VPHuW/jY03WBzXWc9BKs53pKf0qSHouekuI/2PmSK+DpuNVU\r\nyyOrFZQwQ2vda0f042oZ1twJIr63VFycLvH/z3z/nauoX5sBXLrAqgz83uZw\r\nBzKPZDDbo74Si5ilAZL953xz8mwFoKV/KpvAnEOXNKTZekA0vw0vJ2MIL39H\r\nboe7gEY1FwILPsSXQtIPwE1VSz1wzPHmnZl30d89F23MSO8e12xgdKLz4zm6\r\njqIBF3rIfSJcL5+tkDmiXe16zHn0dnfmUsR1Je9Rp7CWo+/JjmJZiIrp9nQo\r\nRhUmsb0JMw1PKVoG95irNVbYHLa5dSioWYOfKR8FfKoIKQ9Jgu7TFi2DsAki\r\nmD3A+1ohbJX5vR9miSfy8h17MIW+6Q70BxikKxA6bx/r/fih/jmWKxHhahHC\r\nBYVEKBrL17ycsFCSo9mDHwhX5pG9/T0WM3MOqkYQ3l7RgPk7LEQPvxzYn3f2\r\nk9HA4aQAYAecgjA3eDDxqesVpZ5211UWVgYL9sRCUJBbGCt4NaO39rCALe1f\r\nxho/X7vfIRNVbdiwi+2mi1nDSg+pKgf1pMyKqTfBuW+7iXkfkuSFu97eNS+L\r\nrW6vOkqtx81bx2a+oxfGQsvkFYIuh8/Rkz6gGreHPT5CdSnklyAB26lbd2si\r\nNG+uefdzTqu6Vn/vHJ5ParcKtvcaEnfeC+I=\r\n=ofx1\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/stream-gallery_1.2208081650.0_1660033617196_0.590064975018546"},"_hasShrinkwrap":false},"1.2208092047.0":{"name":"@bentoproject/stream-gallery","version":"1.2208092047.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208092047.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"5147b5f8b54805bbea52be75a64d125a06f88aea","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2208092047.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-lQrdHZgW8Vs3hJ3TQJeLhdRi+EFUUchAzUtxfpwWEo5XHU5cJvwXvAKL1qOZ3qlZs6fTVu+PvAPdamGtaRh/+w==","shasum":"afe7d97605072d426e895a34d92b6bfb309ce011","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208092047.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHUUySipaxunSidVwkGxa5Xdm6sDlBO6poVFdo0seVpgIgU72aIGieygPtl/b2N8nulZ3YFipixXIUWWbG8TGArxQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi82vRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHnBAAnI06EWyAvpFR5haGok38hwcXSwz7hVDcDzKllNLCmRigF0Fw\r\ntypYXrwa1eZ+wPYaSe+9TddVbRVexvbFl3aHef8QoDNZHLhwhLNnp2JXROcE\r\nC1w8pJ0unx9WzRPw3za3YNPhbUA90gezIpjXFd0lJAJB/iycpIYc2nm/NU/q\r\nQMBBXwsh8HuX333mii1g83Mnwa3ZadoI6ucTOa9/Ozxxm67u0UGiD+EoeYOJ\r\nhASV5OzAO6q6yQUZB17tb/HKqo7DW5oBC4itw88ge7fYSWTSomKK0m7yB8AP\r\n+WmfzANrt32MuZxLFEawSRvv6TgJCf2fkecLMFXLCEBlTxbI50Q0wlEDEevd\r\n9ywe3hWzMYh2v4f3oND2KuUJB/ByESG/YBn6bhySvvegMx2K97ISfuO799n5\r\nBCd0unlUyBkY135bwlIYo6i1/mR9nSeLdntxois7Iw6wQwQSdvekJd1askEu\r\noO9QQjFPgmUoIWRzdGoMmuy9pS26eCxVF52LBZzRC7gyZxqC9id0teTxwZBE\r\nNEY+cbBOFUwBagyFU/auRstPz//DVJVna/36wlIf03GFUvz78MGqx3Wgee/s\r\no2x4qM7/DFzlm6b63/fBGkWvlD0T/zhTAnlsjGwhMyEDKyXL6ZX60ErICo5V\r\n9IAN818f8dSrvoByoowsoukG0KTuzjTX+Cg=\r\n=g83g\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/stream-gallery_1.2208092047.0_1660120017486_0.678711550102209"},"_hasShrinkwrap":false},"1.2207281718.1":{"name":"@bentoproject/stream-gallery","version":"1.2207281718.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2207281718.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-FkwWF0I+9pbVy5MpAkHF0RUDybUyiXaKry5ynQAyPwU9J+fynfCR2bpeB3Cu4YuDr1jt2GVAK23BZDDndy2dFg==","shasum":"da5d7dd9565caa13d68f4602a2c537885b5cbe65","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2207281718.1.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKRS2BMtz4PriCnw2Eofp6JfmYs0tXIC02OgmWZwlTEAiAaxi6MafQ1SMA7XWId3uD5KnmJHSR1iFNup8jAawwKZg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8+NTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFGg//SgQlNKRT6k1zoJWgYq2eA88tpRNDa9PNPERDtp5cg+62hKDM\r\nmo5P1Tiok7cJDqjixSkY6GbBePJ5BN8EiByLEff8px9h5KDcowV/sBk97zfI\r\nMDQe0OwhjUXMErn9F+9u/Uj6K77N5hEHmO+99QC5W58QVK/1Ib9ptXKZ6Q2S\r\nR5pdXt1d8JTVnXp2iZOsUSXOvr+1qSLPpygCDRsI/GKJzT93qElVWV6oOv0o\r\nbTTzlME3Eskr4XnKEJpm6nmNsc70qRZlpiR012/uSduXXpmk0Ka6r7NfVi0x\r\ny3lY9wLkWk7+YUiJBzRenVhE034LAJwgVZwFrot7XUANYbZkz/B/WRzkbdkZ\r\nuW1w5zsx8SN9T1K+FRgZct77ODiS+KIGqMuUisRgOtzjFN/4UowE7LHuEwDT\r\neQWQr1mvjtuMZfDVu1e+EkV+TkkU6kyqHF6RFJdgGmIHo5SriTHk5Tql27i3\r\n6Ea4hP16gbwwbJ1cRnQ9e18R7QKgPmjzcc/Iu3q7stn8ic0666aGpcb3ciz1\r\nbGinPyNmSN9qTwRAiAJa8lgB63RVDapleTCIVhHtmGi37q3X8Y7iR3S83QXR\r\n1a3JIPBto8y4WBoXL11ETNK3LP63VXRgKTLQdtbdd3dPjcuPutVnJVtmledX\r\nb+qqZACX+le8mRZKJmw/BOhCET51GtA/P5k=\r\n=TDIg\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/stream-gallery_1.2207281718.1_1660150610687_0.5691655442241097"},"_hasShrinkwrap":false},"1.2207281718.2":{"name":"@bentoproject/stream-gallery","version":"1.2207281718.2","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2207281718.2","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-kFzia4X9Zc7FFe9rfNUC8axvc4HHkCbN75SDChIgxlUUaGnBrFuGQOcvOylOOe+x3fx6D4SW+DxQ31pydbEkeg==","shasum":"2ba39e5e83a6df959b02794648277037334d4736","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2207281718.2.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEnQ/tOjT5lOcDuCjOPp25Yh6Xv3eKOfRzaY0u3za3QTAiEAzrHtrBbDlGU0L71BidM7m4ry5VCwPeBMj++m3RoSZek="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8/XgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmqQ//Y+8PAA8hKTk/x0la7r3rRkHWx+azJZwo3curSqE9LBB6nnD5\r\nnmTepkVxYSsXp7C1F1f2AN8WSElYF6jGaZFaeH3NX/jr1OVn3ntj9ZvGnGgs\r\ncTncCt1DhyWReIQ70YJGhSh/HT23kIRF/J0RNAtZRmJhOIM+jCAPmqc/9saA\r\ncat5oHnuqd4yQJ8VnE0DI2+BFFBKHGYdb/G+ukOwi57F6bzDl6FYg/1C6/4W\r\nqP3uA97tKRvdYI0jAlKgW5xaY1emsRXuyWlUnkoZA1B2d3hsG20PAoqY6isS\r\nNKhSOW7f/mrlBoZENOUvjNUX9uacjI+Zl57mlMbcFKpq1oavBbElZ8RWZe75\r\nNQvHYzB9rF04rrH5ImI93efgv35LAYFcSHt47KwBzTEMFB+3l66RkMZv8p94\r\nmpVe/Tj+e6roeOLTHiSOopWbHf6TuTKIiFJY150XAHFz3MEuTchx21UrrdqS\r\n3vXXu3AUhOK3jcfHMr1FiGcHRooJs4WJCO5OYDGfbwLe2hVRlsyNpQiN2iQ9\r\n+/rWGju3VHRAyRVdBLVDtxMwGBuBDpOnw5Qgh5lOgdoHpVFTENkgpOfW2loo\r\nDTAhWfeyd0ZRzbjc/iwck8saZ852Nvn5vpDBEF0tbLd0V4EInBTexlwIIXC0\r\ndPNZhtqEjUL5T1rByug1KTv0wyFKXmXxN1U=\r\n=J259\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/stream-gallery_1.2207281718.2_1660155360583_0.3506027713503401"},"_hasShrinkwrap":false},"1.2208112015.0":{"name":"@bentoproject/stream-gallery","version":"1.2208112015.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208112015.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"83d345ea27d61c78ced5f68848c4f342e947fab2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2208112015.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-+hoUHtH/aKte8GN5CchT7y0kytwJx8TwdDXO6lOIPZTbDWmYSlOPg9krYxxhWhuLzOq7FYoex+Fx8zbKd7KruA==","shasum":"9e5e5815af5862334b16281ab71f033e300adcb7","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208112015.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFclQoLGQ2wvSAKznGOJLWpkOjWF4xfr5J1dRdE0Fpd5AiEAspHo7RFo1upQfu/EOoeXuBGQM45EithCn6wYKodTAik="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9g8TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoslBAAjL9o36YcA722kgHzWdOJgOz08HcthwkUKY7OzPIi/NWl7reU\r\n4arnLtBax3AEu6MQNw7qgFQUuf2f95KH4E7QAMbHB+SGK2XRByjrVtfj2InV\r\nKkU+uu3zGuwvqcmRxP+29ooqNP4Qf9yTEi5fufu6Z261epZfQdtu1up4JfmA\r\nzXWlzB1E7WQbAj63LPewKOdn75wGNxf44TQesEjrr7G6IXTRGygOUnaUXaWm\r\n/Mbj5jGFjLcZMkXip0qTTf5CyIKfteXPamDBVYsin3QhRiAOqPLMMb9NSej+\r\ngoNNV9K4GuOQ0LtBq2Anw0AjhGpGpU1m2mBwMJHKkC0dOUd3OfpmflKsG7KG\r\nKUj8JfbOD9f7hqeGLoElQNeO31I0PWMbmkiB3Wed0YzO2uoBnAmm5REWNmoi\r\nR4AiBduQbjz2PmMnH2SYutT+iEixXa3j2UJwoT3MLOaNo5+zFmG2OiJBQWim\r\nPas3DebjnXYeVD4P5WddMd10PHvmwTDaRpIm+HMotZMikIBCrqR6YYbGJ6yl\r\nK9+TutoiFWFSZVrDmp+0VN9cmBegUpAm0+jZIfEe0HBFbWWT1FelsG56PTGR\r\n9kWdOB3KDKb132RIGP/1Wp2ZUCqnroy29zTy7Hi5f1Jekz3HvG75vneanFAc\r\nZM+UQbmOODtsRx23y4YJiustpt8Aer54MOc=\r\n=WsHp\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/stream-gallery_1.2208112015.0_1660292883666_0.7252296512557495"},"_hasShrinkwrap":false},"1.2208121708.0":{"name":"@bentoproject/stream-gallery","version":"1.2208121708.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2208121708.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-5vrtISrGC+3ZebqBnugFq1xRwzTGNh4F3NpSbjufAefn4HMZRjeTwdAKcsSQ2XkoaNqaH2p2m9J7DJ4B5Ob1Lg==","shasum":"7d4fab8a914050ff8ba22c27b09a0ddb43968738","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208121708.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLoAA4jTeM9BuE4FWepgOr5i2APduVNi4iw7qv/Eo5HAiEA5Rdh/NxOThH4SVvD6tsMKLBFbJTrqbQa9mGYUicvThk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92AbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxig/9EsUgJjo7zmrS02PpUpgJBFfrTkxUSNF3N+3aQ4PyU3t8oQDn\r\nHPWg0oNvBwG8OA3DdeGGQJAIi2g/+OAeEv0H95qvgDJwg4Ub6wxmerOSsnbg\r\nOvmpnGtCNtVOYdQDRaMZt8z/NfCBv3Ydz24g0d0XhzDklz0swQbel5QmcxoF\r\n7Hz82TnAr7H1h3S8MbosuDTcDIGLaJiXAz+lWVptxcvOEeVxhzrilide1uIP\r\ngPn7BfnQVciuA6CJdCGcXwAC+qOnlWodBKGS8F4SprOOz7bAIjUBinYyB6I5\r\nJIp4vx7b1wefioW2iX3MUCqjFcCh2Pi/91wD7a/z/FnhEJlzu4yzf037IrRO\r\nl5biHM0eZ1c9z0jWIuzHvNUWlegajZONbXZEQpb3ZkOwDbft3TLL0zhs1+Ny\r\nGEvLl2PC7jMBJrHzP2W3UVByeIQpf4fqdYUEHXbiG+lobKAy254ySmOGYsml\r\nxKa8xnVeiA6W8DhpAOvTVvnk9z27o40rBG1pF4pUKx7vqXwDCFToo5CJDNOf\r\nP0l98lUfLXuEHS5AlOKWYx9toVewJetbc66JYQaLk7v0ubIqbuSjnfPhwi5q\r\nnXbsUzzDrTf/1zSJ2Xu6nIf8HLW5IYRY/o+zVGP7OY6W7yQ1/wEJVCaH4H/x\r\noAwTv6cX1ohYOcd95bNFf5evB/zJzfPP0Vg=\r\n=maZc\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/stream-gallery_1.2208121708.0_1660379162964_0.5254554974496315"},"_hasShrinkwrap":false},"1.2208051912.1":{"name":"@bentoproject/stream-gallery","version":"1.2208051912.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2208051912.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-aPA3WfCxPbQuk/QW5x6x6PVb/Lk3r+erR0rpmhA6LPs0xH6ok+kTnOicQ+Nf8A6jE9SLwdMiPoPRpbxyk+f/xA==","shasum":"9d928f951053c6bca47702fd9239da3b8825cd76","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208051912.1.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQtkAk2n9KjwvbMm1BKpCwITrIMk+D/z5GvmxrMdPJTQIgXzEz1lMe9lyH+a/jGxh+tDrEtM4GfzT3VwiI/xmM4js="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/CKSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUqw//XSHtCW3KeT3zXcQ0tqCsvvEoegNNdNTTef9Mt4KzRx2OT7mv\r\nRAn6ZQVod/3wEdECRkNRaJifERCSkbfpCRZmn019nL4SZvbh2eQhUpBBTLLu\r\nBF4o3hIfF6HMjabXtJ7IUGe0P7Wjn0bUzgtv9Mf9RPgfKJBlvJ2/MUg2bdcA\r\nvvqRJI9wJ6yjctbmiEy03md/3Ch4+CDoXqvAnm3z0IUCJTshMBv1dqCxy6fD\r\nZerYoa5ps8n/yWPzJVHU6gAcrHoSHWSbxZ6e8PE0DYuocY3C12RasbnZ28IU\r\nwTxE/l2esMNgZ/ppLDue6azvI9CcgGJ8t99Oi13QPN/Ciyb30gzokRnJ0pUB\r\nKBqz/S/iWiWZk6UTtWj3k/+vuBln5pPrcxG9an1YvSAFNpzNzCYpgSiuzoMy\r\nj+9jpS5su/WYl+NZi/PT0y66Nm38f/fJoADcKJwKCH4YL1wyKjkR/tmcFaIT\r\npYXjnWWZhHPo5PUx5fG5gXTe+AvNCrvy0qyWQH9HtQeYcrVliBQRfFyNvraK\r\nexehzl9Ur7JEHNh+0SR/1dVi0+e7+d7eUgbkh8BBayQoQkoiK6Pwk2SMRzXV\r\n0GeNOpw1EM0LbnLqmNcg6Vk/28xVDX/sRHjTF0d3z3feWxEXMc+dcIy1/jG8\r\nLJmBuOFNbPODvPmWWxAKhDoAUZ83b1dbZOM=\r\n=xMIH\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/stream-gallery_1.2208051912.1_1660691090273_0.20906303934728987"},"_hasShrinkwrap":false},"1.2208172101.0":{"name":"@bentoproject/stream-gallery","version":"1.2208172101.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208172101.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"372d5623dc25138bb97bd48cd5f97f3be8008658","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2208172101.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-M6x2iYP/bfsV1at0RgZnb7kYHKiNlRNfZOKieDtbDkoEiQC7CoEFc9QlksrObvwsub5zHimFOPWBqS6k/K6hDQ==","shasum":"3171f6d2da75531f46959ef2e1c54f5edb96c386","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208172101.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHRi3RX4AmsE0dpY+gKHWew5kyMZQkYUbDK7uGyP2a0WAiEAlOmsIa5sRmzEI/4cwrmSE93Td0xPcMY3XisJOLJ85Ik="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBpAbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVHhAAht8oh8bM4PgN7xrcszWgY677yeepizOyi7oaCpEtq3l5x43X\r\nJNNvzNIerQ1WGzQbZerv+isTKK+vs8xN8ahcJFiShkX33D3Fm/dnGKZXseZ+\r\nby9WMG2BE3uEWqSeK30cK+x0/K9u7Wo9U79yBkqJWoonk1nVthK8Ov0LnDUj\r\nsaviHRf4iBEFsuf+ioLU/ljwV+EzS9WJ/HXcGw61V0SEUtESfuARxjPFmYiQ\r\nUzTR2xZe13G4g/2GsgLyDn6R6uT2uS6/2u+qnHM59P7iMosXf3jgpoWA/bnd\r\nZ3YjtgsXhZiWU53KLncCg/ss71NBY5/ZZrmabmXYNOTEste7VRL9WxkdGM3/\r\na6R6MaGje4oOlTAo78gvOn7TFzmlJXZgLkdS6hkC8hvYa+Z2IxgtpKzInP7b\r\ndT6HlS05hcZSWTCfVgzTSnnZOHKu1y9l65c8dPK/8xGRrwJatcLqVEYxxWaf\r\n92mexJexCi+iZdDnfL+LUMbFzbFiZ2nMPM5BUEC8etUq2d0LLb07bMIagqKV\r\n3EZag0bme9bYUGfwjUp6peZeSfbYqZ4BCGzUxTh8EhiAsndslLZsy7SLgu60\r\nWUllYFUTWR6JOfNaT1bZz89fURi6GMAWXWsY5D6ySBylnTmFQZJaYUEsVAZd\r\nGndFq2mH9Pea7pproNs4WMz39J2lbYW/zZg=\r\n=7EDl\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/stream-gallery_1.2208172101.0_1661374491212_0.5638360181343665"},"_hasShrinkwrap":false},"1.2208242209.0":{"name":"@bentoproject/stream-gallery","version":"1.2208242209.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2208242209.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-xDYOFRS2zhgIwo5nyL/kkQCBSrVoKSs6NoX4CyqNB50bQ0d82y5IAmVLaIFvG8lNcymO4Thp7Aym7EhQhmjcPA==","shasum":"ef39133c30a43c0f55861f0cf50a58e510f2f28e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208242209.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9dFDdtPAxoNDRFDhkoZ8TG6bcPMvXvCU12KI/GGt/KAiEAiX/T2Fsb+kcebSQgyd1FH2BR9u+SalMAOfIoymcFtcE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBzI+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK4w/7BACsw1L6TclRcVoLuJ2VZcdl0BhLJ4ncwoodcQsR4WgFbDuF\r\niX67ihUsaA0vwZCMx1gBouGjUt8LbIvxuFQ1QNmav/KCp+aykRO8e6QDtyjr\r\ni4IgV/VDGTWdRF68Fo3QLD855/7eBuBMbEitaWJqSc6Tgd2JKALdaSBNJaDX\r\n23GU8j4XD36KBOolraAfWY0FcUNoze2PQTjdkjwdfAvN2+S5BOkzOjI9ogbG\r\nA/PmFpsuzy9OTl9kzeOKgjStqJ05bPdnOmKjWGjJwblC69mcPGtmvRvTLqUh\r\nYZVRQ2XkrGMogwYZtNdB1AgXf8DRPP4KkmzacyL8erKUV1KMpzTvr+44QLhm\r\n1gLqwBFgKCnol/AYub5VcKrG3C7irywOmxK6YOeuiGPjgmRt132iK2NlEhMv\r\npXeT1btkq3LKViHp9VsBY2W3twenpZ596q3GRXSu72EgG+ybp6q4WntUEvU+\r\nAguN69HMCRue34k96K+Akz+bBS5uRroZtlqGlAeGNVEUKU7yFq5h5PM2d3l1\r\nqDL3FFmlSg7+XaspyCO043zn3GANstrwvEOPV++Owxqtaq/z3uVZ8HXoQAiR\r\n4IbvxAVZfheuoM3QuD1IIYQKCRcqm4EJctH/ZlbHi4uIFTHObtc7703Fiy2H\r\nr1kIO9tQe06R77uHoASub0AHprbsMxQJals=\r\n=SpW8\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/stream-gallery_1.2208242209.0_1661415998239_0.2916598564757722"},"_hasShrinkwrap":false},"1.2209072154.0":{"name":"@bentoproject/stream-gallery","version":"1.2209072154.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2209072154.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-XB49xZeX5+dlyP+d+tk3BlYCQM6RuL68yYjoxj52mNLC2bC5FCExFCNHyyeeV+lSxYoCfA5xEaBjf4C9rdcGSg==","shasum":"dce8ef277d0502ee88e6c528b4fbfd32e0dc7154","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2209072154.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2pEt/8+UwM5om31BnM1e056ADiBn3NwRstFP1TK1lpAiAJ6wzt00ALxTCXaXitQi8GQgirbNrVLfO7bsEST1jIPw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGabiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd2Q/8CSD6ILf4v3rA3ZXHEzPy+rALvlwEhao7JxzQyDtXPDwc8DC8\r\nL/ZaZgj5Qwv240lsWXMSQXUxGe4pQgpXEDn2WKTuGW+9RbAX3o8NfR/dIFeR\r\nVOTRGZ2a7BnczURr4uUt8wFNyiVJQHpr7nD/PmF5cgC3GPSG+SbWa4dasExz\r\nT5n6fNGk/QoRIdxaLu5wIO6c7XqIBthB2SqgJpo7yFY/g89ji5fKcdxU392P\r\nlipYBpf7whDWq6/q99P62vahgESxiYvGOzj+/9MniYq1XwFRnD7ftWEdQkfM\r\nYn1/OYk8GfK/jksv2L4wTcqTHxB83A3lY1xWF49r0FLi78WZOQ6kVFn+1B3r\r\nqG8cSNd6uBXPmNMEYebSWaJHsEdeSc+1JRmBS7JAw7JGX2zZZIGoTkkyJryz\r\nOok+G5827pO81dXht6Su8iL45ShYXwHsiyJ38TWCs2mrYmCsPb/lRGA6iVOm\r\n2ScdiyJyjjJt17vV52MMoljJfwsdEb2DlELGiVM4dYIzqnpNqGlH7MaFh58l\r\nM4+9+cND0emeTKn38yqKwG6FU4O3NfILR9fDvz5RUcmvm01j2IMxvdd431oR\r\nevRyBLDZtOR2WeCrZ7abD1yeQhtX1Ph8IV1XmJ9WvkPOVDubcULGG5caLxjV\r\nTZByC48pcZF38UE03h/EjaDqCo3j+AvFTuM=\r\n=jV/Y\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/stream-gallery_1.2209072154.0_1662625505944_0.20467642785081264"},"_hasShrinkwrap":false},"1.2209131909.0":{"name":"@bentoproject/stream-gallery","version":"1.2209131909.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209131909.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"b912a3976adc47e6a81ae645cb98e51d1e778150","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2209131909.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-TqJf6cina/ntXuDo1zHBsG+m2/0ArDb0PA6a3/EUOrH2AlXzDkoe/b6th2HX4Z9dNNgacOEbehiQhTZQvEBQEA==","shasum":"27aa41dd6a6026d2c749e4c3a4b14151cb9aabba","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2209131909.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBiG7XPCOm+Smlwj/U9xfBjjWEdC2CNLvHUqfWgEmCokAiBXu+nutTr3GbYlk9A/javNf/qwHZfMF/CZgfr2KG/VfQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZQ8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoK/g/+LYAW7N1YAPxyGrzgEeHNY3cjcij8QOpV+36XK39bYS0K1acJ\r\nQfkhD63ddfYPNC5yaCTdg0+7CIzhLX+tGruCYNwV1Pu4fN+RDldIojAH0JAK\r\nSYPjba/HiJf/GSWh3tlpKO6fnlDaeET7BfJh9XSIboHFRXoq9CVwDK5LIYti\r\nwlMy/7FVKIjhwINICVff5nl5vb8iCT1Ijb10b8zxbMp4t0wzgE0FwBeZEMzR\r\ne6/4XnnoVE37zszZ/yiGZa9pOikSTpnUw9GczQXecjMdEckrvXUJDS5HiZEs\r\ndn/brtKkDgh45qfE1b+QdsD23c+SsggjAI1btuw9e+QHuoaAIF2eD79bm/GN\r\nr/ZMiFdZ2/FPCvSsHtzqiw8jk7mh01UwVgLHMGUuNEf7jIuT4ENDbBAwQnxf\r\nwXZm4xEgf+5pOJVHWuPFRZBphBL8Cqv6OJazd856Uh83URqo8EVK60QwWjHD\r\nSwNpoM+14pMnKZSaJeFq4lafyfn+q1Nrgnuld2JqakDsCgOhRAGsR+us+Bz1\r\nKHo+NqcNxE0lDUGdBX9in6phPE0aNtWe44S9M6/TqZxFe5xdjLaPZWOKg3of\r\njl0B8PJA1llWxN0iWDtO6s3EOoVg7X3croFepyE4yMSvAqMf4me7r3JIMtvS\r\nkacpOz2rwUXb/qe4SjJm8UtyAfuwZNfypNs=\r\n=Ecjh\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/stream-gallery_1.2209131909.0_1663145020454_0.2122442508232234"},"_hasShrinkwrap":false},"1.2208242209.1":{"name":"@bentoproject/stream-gallery","version":"1.2208242209.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2208242209.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-g+YGZOS5ZU17hJW0BzfeYOy4CrJ5cSCfD+7JXSvbehaxQc+gXFear9i9mebkYYi2KtxeH5yrpuvbktK4crrgGw==","shasum":"3b873399990d55d9878e3c7dd1269e88b5c6e417","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2208242209.1.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWCLWrLvgjHBqC4Xxru9tf4UNXN3TSmW7SlVGSpkv9wAIhAOouYTrgyh9zMtebl0dDIEPrrXZYj901JBmIGhbCGDCW"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjI1XiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryJQ//WLTv+UdzijK9DYaBuW7U1VrtwFcfQaBbSKqb0P/+MhEwuRTT\r\ng1O1RShgqM7zBVytIJd94UxNu6r0S+EPojxhriKOz3uSTZKGvI0bH8o8CQPB\r\nFr5YplmMGH6Bnugm9/RTTY8gbmAPQO9JzDfP8P6JnuaF4hrzHBI7x0YNZ1W1\r\nXPlS8MMOgF0n0QfXMfJVLLag4D1HqRer/EEKNffmn3KP6Ao8kli7Qyfonl81\r\nkOoubAv6RpOpBkhUd3hgrfR1ydKus3LAV9ESODjKOOxkBEnx+2xROaCJ2SLb\r\nv3XAn/a5mTogUHy3LJIj8RIDkuvpgDtamfO0b/FXxTFMu1SZyOMc2wLzb5f4\r\ntiz90j9O8VVKuxgCY26MjYqzRx8+4GPnIqae+at8bqqTiRwoiCco4r7YajGt\r\nX2V/EutPVVfiAojN0ftFJivpejaVieY6fG31fFzvHWvVtCu+gM9Mu8j6OFP9\r\n7o8LHgT2O/xVpP/g+JyrOfQ5J4mTD3TAuNSqnN8vXGwGCQh6tfIXgnPJMOsP\r\nSAubj3jY2nQQBaEstKjzPhw+ff1sYX4olD+A8sX2ec4R+7PI/aS1wn7gkGop\r\nxsaUb2wCUzs/+mTyePYNZAsDxgxctxBcRi+N/KU8kCrQvA7H+XTb2XvRQ74k\r\nmvA8J1Zt3Zl8tm8Hv0hGXhsCjXce1S40OFo=\r\n=uhLM\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/stream-gallery_1.2208242209.1_1663260129763_0.4019710164971433"},"_hasShrinkwrap":false},"1.2209142312.0":{"name":"@bentoproject/stream-gallery","version":"1.2209142312.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2209142312.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-KL6WO85RGgvYsktdp79prlnmLHyxWLOnpRwUi/LXxIq1BhKVlg5qqXRwVhWLBADF/Md9NYoqbVn0miu49rusew==","shasum":"4d3bff8a47c0bab642264871ac9f9fdc8dc0dc79","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2209142312.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPXsOaUx19shqY/9GosmaVxGOn0jOOA8lTgFFxHFSmfgIhAJYla3cNR9FQYCVKbsKK/9E6NxUHisHpsb8pmJ0Xku7B"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKjmfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIPxAAg1V1B+0Sz31WzAiExR9DqYT+KxQeJ6Vj4OgqFClQgsHS5mps\r\nPAdxCN3oiUic/da90ahgtAxSBm5PQojIDLH3Y+BMBkJAmPDIJNJW0tP5CU+u\r\n/yZw90rOJE27Y/98yCx5H717NdLra1T8XiLd+LryBWe/tVjnajjjb92arDYt\r\n7feOGWsEEszjnlW+O7jHTGhmfiqCuxgxjrQE9NSDhT4GFOTk0SksIdapj2Sd\r\nBhh4yl+J5sjSVY86h+xhMylN/6EcxoKdTZcTQJDpbRjMGYe9jpG69wXxATC8\r\nUDHCxjv7/lrBXuG7M75aNVPc4AkhKdMO046J2ja3UGm8w6eEGOcI+K8YhD3G\r\nGFpzSUHlkihAuyM9iDGuz0vlxIS/IDy8gTWDl0H4Kututb+nttFoiFoFxcT9\r\nMPpmRYujSnG5qFQ9draKiIdmgarXjhdD5jOFqBvwgYNHPJI+59EzIN/+A3N/\r\n6vM4FtRJAscQEAWtnpUxUt/0+E+mAs9PZFvXKpiJRzVbRF1z1fRm8/7rGZfc\r\nrh8g+2jrmA9IuSlchANmJ3a/N44tm1SD07KdNOQlZjCAPb9G1v9r+Yk+Xf1q\r\nbm4ku8MISS2BCGOGaS+pE+pB6BejjUlnuO2+lObsVORD/PqwsgALF2OQEXY1\r\nFexLzFz16vOaqtXJFyUqpybczrbJgBz4+5E=\r\n=mglT\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/stream-gallery_1.2209142312.0_1663711647218_0.5406202596998482"},"_hasShrinkwrap":false},"1.2210010655.0":{"name":"@bentoproject/stream-gallery","version":"1.2210010655.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2210010655.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-smehzvScJ3UPcds4kjoHfKObWGY4Bbtvu6rlt3K73CvTPfZK1H/LROE9DQJOvEiP2KqbAnaX7AMXVBH7krLHaA==","shasum":"d5a04ebd5a4da4f95b82a9d4c07235cea3cd396e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210010655.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6ttSWc4bTA1sXZb3vWu38jDeKFITp+QA4gWs2mkT2RAiEAqz8o8t3WeZy5ATxZPLEonadCZ2zwCsBkJZdgoAxWRN0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGQIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU0BAAn18bly5D9RWy4xMDI/tFGTVj1RVe7EVedCD2EzEVdE/Kf/e2\r\nWH1eUmJ4+ijeUnKXyeNnyPNkxIL5brkC9CyxBMc6OHFzCuisHrmo7F5iJfFC\r\nH3nwFjnnzPIkgotcwzVCBUPw+yvZ2YFhtSlgC/bmDFuescsLXt72tTkxcab4\r\nYien4e3FJ8NeAPnp1EuyBa8oRGhTtRpY5WcSv3nD5GrvTwaahLfW0tvXv22J\r\nzFNGY++5AINlvLBqnm3A0nEJv9nGzDFaFHynZci+2+Qd+Li9bpZEyNE8qc55\r\nHocdZSzIF2r3mPIxS/13mgnYqGkuU6JvUOecI82Wko9MsYSzyg/7c1ogUAe2\r\nxJWmTfARvxGhPs702zaT2/C51Dm5dGlYvoC9qmBpSzGxH4o8EvNfVCDvBhTf\r\nhZvB4LnTX1pTPv6bw1QiQVMVOM+owu90TxtrozzyZPdLK3xrLbn/e01c49Gw\r\ncXYcCCavQnQBDnNCn5Iks9BN9+nbYev9O1dBbC7YSUXBRGNOKBgunvIkPSOg\r\n5r0Kw2uQnNa7xKobLsZKCJXflvPtqOty4k6jxIsmlF1lhMvtWuJB4HvVz0E3\r\nLyMMtR7DMnbLYaX7bH4yfRbLyaJVhr6UegWMDce7BKKtFUCVPOISxnDGVFLY\r\nn/QCd67JvCZZvIDgSIfE8tJwcLronMgYB9A=\r\n=gR1r\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/stream-gallery_1.2210010655.0_1664902152089_0.6220168248777083"},"_hasShrinkwrap":false},"1.2210041838.0":{"name":"@bentoproject/stream-gallery","version":"1.2210041838.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210041838.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"e79aecc1c4639b06a7f2843d961bb14f293a53ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2210041838.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-BfIRZaVGrfMD5Zin57KPMqcJlgWjgQrPP57kw2DmOtF9mpm2SikcS2La5IktKZClIph0oq1NvJcdHORcYgx6rA==","shasum":"800ae4f64c475bc48ed2367beb7044b9c461f167","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210041838.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+RHD9ZYFGkeANAKURkl/LNbCEhOLKMXhgqissxZP5oAiAlF38C77b9wub6LMVQK4tWEUER0Hcav03UldJQPIwTjA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPUE3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolDg//TmVJL//+aKN3Z+aylRwL7dzO7SBFzIvGYVkZb62E67XeTySa\r\npH3ycqi2EUTyVPRItHWTM5BachxNvwJmqGEhN57NNUOdTfBxPGFFobuNDH6N\r\n/5om3JDg7wdiaujs7x/VSxfEFx1fozLrSexddSpQ6d2MYMSilXJwqr3JCWJK\r\naKE2EoauIwIS30lQKBM0d6UuJMKbpamY+EZT1JZhBxyaYZR6AWUkmIYvzbq+\r\nvCBAvxv8PGlr4+1Uf4RRrWuWs66tc8SqXvW2+ccXEFJ2Wd9Ey4FoPUxTSlG4\r\n0df7L6nVx5xhQUndqyJVfi5H8QheqRMw0qQKQOtWa+WpxMrqy27jS/iEA8QO\r\nyRfA+oZ6mSm5NPbM/U1+u2hT2WYFd4TFldkK+ECK1Dpm+rfP852/zoApxEIG\r\n5Mob5qVusuav7QHzMf6ASCPL3Cx0H+ygjLPuzU1YoIA/kHMSqBdBcWVLqG+g\r\nl7Dqa09NVyi3WgZGg2SKCGQTREobAmPQL1zyYOOPGYjJmpJJ2qEHAHT98CMj\r\nLit2KOQTWgO9S0hnLHqBkBMpVf7V1JNhgN4TAcuuMvNID9qyVIFiHk63FeIM\r\nABWw94bKKEnDFhYNZawYmD/Ku7vCQNLR20f8KjuCE1VY8lXAYOMzfAm0BfbP\r\nZ29FZlLkrclquPzUIBSjc7ugju9bq039GSw=\r\n=L6Pp\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/stream-gallery_1.2210041838.0_1664958774883_0.8520514379233408"},"_hasShrinkwrap":false},"1.2210052034.0":{"name":"@bentoproject/stream-gallery","version":"1.2210052034.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210052034.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"8a0a0067f57f89d0566ee1db3d4bfeea072d3c56","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2210052034.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-82q+LsHBskFbpyUVg8RB1ecGZkPE7GBVklCPrMQQaGYYuDaTGnCouG94lWQ/Svk9Sjjzpvst7grdnju9Yf9ybg==","shasum":"0830bbd1be96ae152dc73fcc57e81347a2847748","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210052034.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7RJQLhNVlPLR6aGdIzShhLWNBJn8nuu5TKPo9R/aFdAiEA9whGAN36qGvZNuoLBaedqfgDY19+DYvzvLuTskAmGuY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPpECACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRohAAjBwtStunpDzmPvgnRSZGFmNroyuoXB5gR9BSFXt5Jb0Kb0T7\r\neKaSyJzsHWA4FV1X1wuBa4Fdk03oy6YpHGyLA+ptM6oP/KqvPpxKFsNPArsR\r\nnFOGgex4/27oYP4r8IV1qjgk+dz9fbqH/7vGLIjc1v0/XsYH8ZjzpBjfyDG0\r\nDDHoIZfWvXUvCa6lVZcCCZmWdv315wfwJBP/ODFVNQmAqv8u9EQvue5nMU0X\r\nYLBKlounEu8RY02cgDTdCJLYzQXOKrH1t3N2zBeHGKCE+q1PQZzocFI7MXtY\r\nAA+oMWgY2hJWInnK7+bA3Ra7vJ5Go46bxzl5EUAQD/edOVZV+SQKvE6yLXcv\r\np+HdK3VybffJaINTznaJlQEgmmH3OEww8TiYFBL9cxiDxeevputS4Tl5/rUV\r\n/Q8Xy77ux1Vua7NzP6tZV5fl2w281jIxoKfJ0mmaYbzM5sWHyyteDkZARStW\r\nv7Yey0KEDsdNfIyIQ2k79r61QZrocnLixWrt0dQ6S7OCkyvHjMd1RBbybP8w\r\nnWIzYsuB69b/gFia4nXeqrMeZq3DOEOn2iPzMcsrQDSchEl52RyuH6NKERUw\r\nEegKA9KCuO/BP2oaeh4yWkEJrTRyDvOZzBdKYYUe+l5ZMYlrmP9HL8sWab2s\r\nqE7urs3V2aeI6kagJztGQg2Fdr3XHrZKztU=\r\n=ILb9\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/stream-gallery_1.2210052034.0_1665044738421_0.7857169220737479"},"_hasShrinkwrap":false},"1.2210071758.0":{"name":"@bentoproject/stream-gallery","version":"1.2210071758.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210071758.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"7c969ff5fd5406304f6a9867fa0db59b74e94524","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2210071758.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-UmH1xF2tw+xgzRC4AcgbLJBj35tzQcniGR/vOb2gtfO3ChK7F4BHBZ948eEX7L26I9cGXhldaTS8xHjwKK0AwA==","shasum":"c95781dafa030827666a5ebf3b0b6f12bab5d5e3","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210071758.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxUUTpyVvHsnlwVNc0trGdFNzPTxfThHeMpMQ4P5pYcQIhANvdZqRQeGnpAwrRd1sFDqMwYgXSYr9vntaA8huEyk7/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQTPoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfxA/+K/sfEUfXRc0o0H+P9YFlrqguzQEK5BG1HXnFFVj29PyxgLvJ\r\nMYB+Ox9m7i1kcjhrPqAD8xiwKEtimul8cP2BBI4TTgopkqnZL+H9t3lk93TU\r\nUvM1ASxVEMVb4nAfonTbgNdkE0HYP5TjrNHjFvUVvPVFbBJk+GeOj4pDrGBt\r\nZcyow6yoFJ3sCJ5SMP9Qvf/PXaS1u5wFgri5QfEpmkNUUDV1b5+bqSnN61zQ\r\nsjb09idiJXjWGFzuRVxm5XlJFlDEJQi8eOuH9e2wvv1BHAgFi1acPCah7UGb\r\nfb3yF/GkQcWSrm8LchMwgS1VHPd6j6XqPQShc28fhfL0PR4diJFTzkEMdJ3D\r\nJoLKnnFEldLbmfatzBNdAWUIYITT71IFb0DJcG8x0aj7nKtXXAQVKXWuvXRW\r\nrgjOd3OfMfc1uflKVuxEfKuzPAKqsrM1MeHQFqQKsl6TBbv5oRwDJP79V7Je\r\nMbd0AWuGTsR7pMR4U32u4MlR/Zhy4boyY2BpvUY4ql5cIQTdmUrItlWJITFu\r\nMS77XoKWrPJ5WeAL8BgfCrieIY/c5GIp9Dsuh8IgpsFRy9RowS+Nqj+RYBTM\r\nkPZrIsev53A3umwKSw184xoyh3IjBZaaYzNMo5bmRFdDirSrlCDjSlmnbm+U\r\n6DxYSsIs3jnXQHlBevFjESrHsCPIWYK7KSQ=\r\n=wmYV\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/stream-gallery_1.2210071758.0_1665217512543_0.66800773255061"},"_hasShrinkwrap":false},"1.2210112333.0":{"name":"@bentoproject/stream-gallery","version":"1.2210112333.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210112333.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"1d82bae06844d5413aeb632cfb2f3ef443548ad0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2210112333.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-qI7QGH+zoTAasEWHgWk+puOi2wRXZpHVD6NpyD5mND3L1eLlxNXRCCSLasF6y3swvKKN6QPGV2aHDVxdvLIe9Q==","shasum":"7d4e8525a3c413913f56dc2bcc64e2dd254a8b67","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210112333.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgbsAIVQ5qwgFsSn9s+VkOhVNvH99XM8+EXvcJ9OgYuAiEA0XiiTwVHJv0m/sFAMlWQSA34de8FY8jNI0mftMrY5p8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRnm7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9JxAAj/y3CUMccIcA/5hcPBUfJP1z22cbZaGHUl4Qxikc1WFd7H1d\r\nBjaEShwcqXY62WLRkb/z+jUjNZePW4WgyBA+Jyo6gACXXlwxnyqxTPhK21Wo\r\nkoImxmgI0YMP3P3A/7HKep5rRn6ATMhSNhVuUlN+R0XcVvzC9HTYi3Ru22YS\r\nhDICsvtV41Cqf0JifUQ9jssTsBu/dK6yVWTTFjhOyIHmbcIu1IUx1nngoBg1\r\nXlKF0YUgJk0gBn33bn52ctE1AqAa8Oacq6gg/rqQwmBDiyKlcCv6VsDiwV7L\r\nOYe6pL5xav5DLbyJwdpwR1S2/0H2Ff7H3KpbQ/jpaXshdkTr0su2Sn8IGrgF\r\nbxrmvwvQYE0Z7rjVXa2F9IWqeGECsxbyU5SVlLv+MyekAhFGX57Q08WtPDVb\r\nQtqWnY2BAtvzxdrgIuReO9fZi6jwAi8+W4k6FGqtD2y5axer59XRJZ7IF62f\r\naqMosb52Z/qIwmYDq3Y7k30eDq4NfluGhXzUuThSmiQ01eKUjm3pg3sgu7tY\r\nsFqePRAJ77M+Upb4rA4ZFJP9zD2nDHBIcCc8l/HiS824+z1pcGYajmYMR0e8\r\nKc74jx9AysBkfHoDjPx2xmGMHEkJvNGub50xsaNzO3FBh4v0d/7bYMsgs5fv\r\nOY/a8CugOt84xEn6aQLk0K/mL2JjnbYOOW8=\r\n=6UiX\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/stream-gallery_1.2210112333.0_1665563067468_0.8184869167879549"},"_hasShrinkwrap":false},"1.2210142102.0":{"name":"@bentoproject/stream-gallery","version":"1.2210142102.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210142102.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"4cbbe2b23e7b0c5b0c005c94a574ea48a45f7693","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2210142102.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-ZJww84kbkLOM/d3h/h8myBppBPyqI0r7IrAC5+u05dIMyhFRKH4amL75XPSzBXcrm0lpAK3LKwu1fF/T7cGGZg==","shasum":"df2ab55a34c5a540e7a399b0c502826cfad3e355","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210142102.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFUUOcVMJUbaH5Evl86taSi+3wmZUcz8p/bSd2S/uqiJAiEA9HxogsZAtcykm2i7ULQhARhRdIowu/Sapmo2FoXWTig="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSm4QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqqsg/6Ax9yaoWNeRE2GiRsGqhnPyGkSJhE6zTEvegMBBRgPfBulgYP\r\nbpbQZqmUlzOlhqFF4H7mG6H81jpSGEGwvQWa8RoVQxwniEpjcaejoaLad816\r\nHfJRWaeJuzOO8YZ0zNGWoVg7QXEXhhU6LTRbqIf6RtlaAvmawGMAFYDPbBGa\r\niH7PeICEQe52Qy1ip6zSI77K/komCB47wLIn34dV/Zu8iTuOIJoZ0GOW9DrV\r\nm1okREr1gaGV7og88oWw8XMVd3y0ZumiBK+BV0g9BuQaplJqY+ohVit5liAu\r\ndd395vlGVaY9EaDVu2XkiFPaDzYpmb8lB2IwBMmbk3/aG6M9UMtQCUayOaEz\r\nvLj1vFchxA18u5FAZRlBOnUtYs+Yv3QmCd0VbKCFZG4su3VwXZjxms28Ln7P\r\ngtqCS08GSmER24bfCryaX3PCkYJjiUA1RxISHQlPvdCxBF7LDpkEci06jCtH\r\nsTwnKMRWS3PDHeSLoRETJg7NDw/hBTg7+XRcWf9e/IRGhUnCm3BTAy5xdCKk\r\nh8EDPVrDTezbQIfh1VEBojzRYcDyvnnkOPk6gE3H1mcL2oei4FI/vCc3/jQS\r\nHLqemE/08dRKGUpZ4tb2bofcuQuF7OX03Xf8T14uNr8xpC7TVkTGMBnrjBS0\r\nleHUtcsJ3ITTk89W91+bRjfietioxTrt8VI=\r\n=dBMr\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/stream-gallery_1.2210142102.0_1665822223886_0.5849702564304764"},"_hasShrinkwrap":false},"1.2210172057.0":{"name":"@bentoproject/stream-gallery","version":"1.2210172057.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2210172057.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-iT1kwmeB+2wk/iG1STIIEIhOHFBb/LgUi0Lb69cmrJhvKU+SDKx0v6hDydFEw4mvVlCqZLbHk04B0nkLhgllsw==","shasum":"196e8a06cadb987a64be6ef7e85b3a497f33d61f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210172057.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlXJE50vkEHA+ieLpxYBhNV/xSj+z2FxXzQs4Y5b+G6AiA7Q/EZo5kHYyqlT0dqPJ5M6NQCP2xF4+O4aEaiGtVoOw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmNxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTfw//UkNQS+M6PokdqJ0L5u2V58g0nD27LAGRlnFXs0c3yt+8LjzW\r\nDe797m245BA+vrXL73LAhxg54Lhgfd6h7+Cz8ah0Kak4f2LBFKJiT6Ef6Yxv\r\n2FwDcW6+7dL+26jHTZ1DMa5q9uYYJxHPDR3zjt61KAkyoIk0jutvS1ArmcAg\r\nezkbG72pT1dg3cjhcNzaBit79/CjciHZDkB4PdqSxTcnJ6MvHl50VtarJhgq\r\nIQ6ZuNGuC6ooisLaO4v9mXpd6m8Km7e7gFwTcbq2k8AFNdstdEon5yqWMDy6\r\nz37ee6Ob2oqJicV87mCiEuB7z1y3D65qFRjhTVLU9G4KF/NxO95Ony2dSd2p\r\n+A2cD+MK2wmVVqzDZ2jPUwoukuaaUJF6JEQTN9pBmYFzeuVohhoZuT659bRF\r\nLnlaW5858g0TQU/gF+LfDlgbHkUxMP2OfLALdUHDbEIBOc5a9Eb7WYGTjV0J\r\nQT3+K5Vwsn83i+F1+5Q9sBgr925swPWFf+V3/EpnfZY0Iq0IpgvXm7mMsAe6\r\nxMcpQ8DOLSPikIfxbzlwF2m5BXseouGn7AG8Cq8ZPI2DhCD+O4VMpTY8X9jL\r\ni4Lqwv44vh7k1wdubYMSKN8WHT6hhwAuFUF2FIuOQ5ciWZrioTgsWhq6ziT1\r\nu6SpKjb1sdjNXQpPtFLcGmiRpK7raZ/sW1k=\r\n=ignU\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/stream-gallery_1.2210172057.0_1666081649076_0.340825437699531"},"_hasShrinkwrap":false},"1.2210191347.0":{"name":"@bentoproject/stream-gallery","version":"1.2210191347.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210191347.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"b2888af97582abcfae901ed340328b22e9caf2fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2210191347.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-zwBFKxHrOGShMu7oU0pPfZzzaEIy2JImV1z9boFxW7pm9MyFzIGdiMrreaCczohc/YPhyEk3kdR4U+aqdhu+pQ==","shasum":"25fcd09bac327a1b2b5b93030cb88d891d975b47","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210191347.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD81H/fxz6v1SRAEt8dokKJ7mCVzFILSoYnU1lIz7NgaQIhAOGIAUQoTBR/p9C/KXskcMDWoo+gGQpscXc32gER3O7K"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQX+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzpA//eru+yxZZD2Jm5E2zG/mkDf/1/0qOw/CTD/Yox7+b2GGtSelo\r\nrLgW5//rt8E4RMlab33wxpGiAFosWSsxZRbTL2WdWoICY31fR9fhPM0wNwUC\r\nbPT2E1PV2Fh3cV2kdoQWh5dE8/6Ab02BS+cTD9neeftG0nVox6O/s7J5V0aZ\r\nKMQriQ2heFv86E6V2g3gje+7Bcv93MGRvroPK4/xm98wIOouC/i9mQwTAxHJ\r\nF+FhEOonZuvmqpzlrckl87svxYrrwK+s/R+5vFY0xUGAYqBs/vfcLtC4n4yB\r\nVlDqK/A0SBCGJfIoyDB/duxSfMT0T7I0QFlrVGQMSgbYjB7w1kyOJ7kHjwKn\r\ns9VAKUl+7LkR9NfXIUT0N/NUA54K9Yl/a0rttVikiWd7zIHZTzEGT1TxfJg7\r\nQUZVGiyrDQm1RDkVtgmA4EumQVV0uCcDLqSbmsFSocb9ZJqMilMyXzBFZlZT\r\nRtImM2u314OKuuBk0bzoOSja9ZLHAvh7gi4Oihfj7RRI+/LCCVFprFtA4Ql6\r\nfDwvA8he3n8aOtwoLOahsK9ersHcHTZwLtaOJLsVHSf+HqjhMSr1Sg12ke4A\r\nCAcEpolL3//SYkK9KWz84QmPnRIVB8IXGSHa0KgTDS58wLJ9FlBdzZwtr+RY\r\n2bwGx5XrlioKfr0Ki1xgQHnjkczTd8ro8yw=\r\n=VYqw\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/stream-gallery_1.2210191347.0_1666254333902_0.8448740283587546"},"_hasShrinkwrap":false},"1.2210211855.0":{"name":"@bentoproject/stream-gallery","version":"1.2210211855.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2210211855.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-vzJhLnSW6MhQvNd9pWooI9Nu+5A3eNi4q16oStPuLHqSocJ9hti8IHINxsYj4TUcqpYxlAMNQwxn1yuPG6nRKw==","shasum":"3b3d9adfa339d3867d2224f00404c43bd641b4d2","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210211855.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgpiioME3T5hO3XPL+KfU+rGxkNhxnR+lsKXwCUlYoRQIhAMO5qneIHYJ/bagWXNCNb3HUvsJv0sEos+gOZg0GeAWY"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjU6iQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmptdw/+MzMmp3d7UH/KWsKMyva7L6IihH8r1WyOLO++6ZkGaIDt4jGW\r\nBZ2VMO+AZlOgCLi4xQYzHO8g2ASo8tSq8AipDkVNZKxbU3XS8ERkqwX70s0j\r\nH8gUgO0swPlTDNc3l9MNk69c+KVap1+6ApCy3ARvrsw5s1m5/XXjRsxnkcsl\r\ngUoL3jDN8DWXVPIdICW2tS0UUy/wUJ38Zti8blJtYsh+6R2sO3NMYRxi3PLz\r\npsBS1BHk6Etcfn9R20OM6YyjLyMaiIXmdriZ7/X6k7ErZYDT3KO+vBXhdfkn\r\nFzoZycbjzg9SXhGbOssdPi36ZVuPt/6JqkmPbSpBi2ydeU1sztkd/fzHD58M\r\n18x262cSFfV2SzTUKn7Blb9Kmh02brcpmN6MPJLVaARMSiVpV03ihWUkCZIg\r\nOtPPGHy5/oAHFog7OuC61nXzLTRQ/HqGmESORcvlQ/vvvgErfRUMWhhaqkC6\r\nwbkaA6t2Zys7AZaYnBWlFser63xKxNV/RCYm5poONSUgrDNkW3PMBqizYF5t\r\nK7e9QjdZHRSe3fKVpZE8wBRvrLx8Zo11oSm6sDEdru5+AU6g6LqCsPd95o6H\r\nePIkdJI2HZ2dwAVPLPM0lq4sZUYrOhNGahsn1H8N7xzihTqqX32YnnlFXCag\r\nbFA0MWQm3191Ag8QWT0058lDECA7IkEEl68=\r\n=K0bJ\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/stream-gallery_1.2210211855.0_1666427024431_0.27445078499689357"},"_hasShrinkwrap":false},"1.2210251605.0":{"name":"@bentoproject/stream-gallery","version":"1.2210251605.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210251605.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"a1f66509b5a6104dc33409f285dac1ab133942f6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2210251605.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-PfQV9SVfHi4Uiv4MXpTu+CVUF80Kcl9S2SMALKMlT9r1slA6+jb+D4xNCZcqJ57I2oII1bNcq38aSyjFXyBUxQ==","shasum":"b15f717dd5cedd691d1849f257d74569bf450b6b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210251605.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcsMiu/05hnEDRabE2KQXSz/89qJWLb/sSS0q+rIlKMQIhAN78H8n5G53m8UpacYlvOkYUrSAp7Sjodn7lnaq17mOC"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWO+kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqgpg//U5BbnEEckDR42c1ZgFvNmQJcKlIzzPZ1cwXnDtume+hTz0MN\r\nnVktNewDrvP6nu6d1fIWiTKYs9hMs6lmOXTBtqKnF+QkibgxWefJUL6xuXQo\r\nIFvE+yoAIrBdWOlM7IG7zFi1XBUvXgtxeSrNxekUDfRvjxPE5tIBzoEl7j6B\r\nzYH2wHL81l/C6E2YRyXzr3iuNaXtkSd/Kq1LZdNXt44IdReWud/ylimMmVB9\r\n28x0GUIDhJ33HCymbCq7wFpHsFJzQhKPylD8XHlyg2eTlocbCpqCpWyl/VAC\r\nzKKC/M8i6E0ZDaXIDfBTDFpnqleemBkRrSxFXoDVNRl8I9HlZISjDxpD3SHb\r\naxo5yC117ov7N8/4UO6yZDhfvreXNSSIYIMg/G3/3T0NQJxgFV+u3TRPKcDm\r\nn+lcbfEpzXaPY8iTiRkfENXk8nPgmmUU52z63Dpsy8l1sxDoVHrqWeFJcT7a\r\nMuYyc8sfgO2vh5oqtMDNAxYY33f4xdI3ERyhTMYwgANiqx8myU6W0lK6ck6y\r\nSXU9g/JbhpQZm5q4ZbNb6JjHz6VgnX2TDvM52z08Zt1biIFrMUYW5xdajy/Q\r\nMvrwqzS/Ih8pk2BeL8bt5kGYINq+oe6/nr2qkg2NUaBf+tVcF5kqJzEaWzIq\r\nUFbn0l2Jcg8K9hVoHoIoqfNiNgiXsgIgnpY=\r\n=+gES\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/stream-gallery_1.2210251605.0_1666772900622_0.619351119948468"},"_hasShrinkwrap":false},"1.2210272257.0":{"name":"@bentoproject/stream-gallery","version":"1.2210272257.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2210272257.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-slKmX1a8ddtYeFUZ/dI9YzaD/43eSp9d3tzHsAnhDx8sD5w2/bSFyRuZu1VZKBJpUjBT1pUy4jgO1HMr2eNqsA==","shasum":"a980773d1eba1c07f63b0755accebe4c5284a025","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2210272257.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEj3AnvF04+UDvcXs/iaiStN7yh5jo2YDMrjPNiQnUeMAiBjWwrZhOox0DDplod9ODWcXLE595lU/gXgj3Ru04qY6w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW5ItACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeMQ//WBZXVGKYqiWi7rWWjN7mFAmXbqwCfCbEvCvJNx24x4Ghdq6R\r\nrQyIjbSEGYipSdoDsw0ObSYQjTzUsB0hlx2x9tQDHGD1Z0SGD+sXvv6YUfit\r\nwKwaTxAYqsHGrlQCImj+Ls7Ky3wOlyrMlD5YuvHv8bhm5bPnQF6Z7QgGl94m\r\nXdN2vL3EhAiM5kc2C0GwUUQy4miFjmozfYZcw0CqfLGRo4ABkyZRaykQWeA/\r\n6jF2RfrEAgWveC1MOk0IlfBa+put8umDfGdPad9JaOuoaOPTFHODyPKjfo3+\r\nXqRyW4+AgRg3rKPzGv+MsD+pxnn16cQt+7pedTp+B9i1LWSW+ZiC3ZgvJkK2\r\nrSWP71ARemMEzVH+sp6LFpOkBkSKuJPSTm4fOaRn6EingzUUT7opbi0+jBX4\r\ntlKXmTlndEGofpLuH0KsS2lYAHgWF03UajEl5C9Bqr03i8+axATsGBDfVR4G\r\nnUzCfO1m2zn9f7q/8RaovUkgvRqYQ42DOrshy4GnSQDcI87avSFdbbFCj8V6\r\nmb+o35pIIvGKeTS+sbIboCqBsu95a9MaOXJOQ9Aod2q1FPyQhj6CQDtoa6I7\r\nAM/zsxlS6qCuo/VcpfDGT1B72Sc4xKHYXSErMcEys4obfpeFGtDAOqFb6Cjb\r\nRolyxzf0mpxg73f1oY0QSCZcZ9XPEVMWj8Y=\r\n=CSS3\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/stream-gallery_1.2210272257.0_1666945580811_0.8485086328352804"},"_hasShrinkwrap":false},"1.2211042305.0":{"name":"@bentoproject/stream-gallery","version":"1.2211042305.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2211042305.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-8rUkwjqW1udA0sSxrM5B3U891oGuS1hBoD+9iu6jk2Owre88oBjsW4TFlsdgxWCFM9mnLGtfzZ0CFVnehFdJJw==","shasum":"b3eac5b8f04183c4162c185a152215f847c5bfe3","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2211042305.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFSjJ/xjdU5ftFEUQJ5BBlmoRwTRuiBmuGHGaAvB6ZTLAiEAv76j5vL/AVOUd1QLy876e5TTQ4opXRczvKjuRjqGoIw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZh26ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofMxAAmFVIvtkovlbjBoeSjv8WzNm7+0SR44sQaYgerhXySrTxr6ue\r\nLoikdqBINLeqA4xsUYhsmM7SfdQmcGxRznL/HARDCHtmIYl/7Nan3CaXknzs\r\nCnreQV6fac5PPCsd3h7sI6TSfOKJfQe9SiFnJQFqJzJaDwsuisKfOYS5ido6\r\nk4djh3r5+AlxM+RyhoyV+xeQFCKEqHoXG+8SjVcM0lo3FZNneX1UgD/pnjmx\r\nnBpkasYG1spuvrd3RDE+TKbLXGsGhAwFr7rsIxvA6B3fvZGHwVB3S40lwS9v\r\nJoTnXhf2emOu9j3jDviVrJibIqDlOaU/neS1yG/1WOVqe/yaeeVzAKlJr61k\r\n43jUqQ0VsO4HfSPf9VopMZxQtp+9C5qCv1o9U9SORogbL4QXEpt/BRRjNPhG\r\nEw9sqsDjmBYNVAWrx2uOgY/ih0a1VUSNfAIy9Qx9nejZeBOTNpJZKXPS/Ndg\r\nJgEB6XBKIQCDgIP6aD6LN7OC3rGFAgEEahT0ecm21PZCdYRj+/GPYm3UKaIS\r\ndOCgPE/1zdC/552Gdu8TQ3pakpf2Zq0eKgF8L9vG38UOyRt71SmVOPu3qRwL\r\nhXtRa57N9GUDYJj0/ZYEiwjo8LoAmynSSGzzhpTCV+CYh71+j91WSpeja+1U\r\nW6xaafEajY6yd3HP0idofFL2XyFStKXKQ38=\r\n=rOav\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/stream-gallery_1.2211042305.0_1667636665789_0.580910505561913"},"_hasShrinkwrap":false},"1.2211060024.0":{"name":"@bentoproject/stream-gallery","version":"1.2211060024.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211060024.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"f6dce0a3fbdbc90de3eb1773dbfc31ff1e476460","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2211060024.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-/29bfy6UJoFf2okAZm4NiPqJVteux9UCQROw/5EN+1JQbe+JDuEdqs0urnFDLOXAXY9OYRfi9DW0fk0nPVeLnQ==","shasum":"d35dd81bf698b0b6fc656c2d451dfe4f9a459c60","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2211060024.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHzSEPV1G4Bb4qNoN7ltNQWvq16Ex4ALBYPhUE1xDJXECIQD7mOtajopQR0ARoO9Eano6trUjEXutbJaD55CMO6X1kA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahKbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqekQ/7BRZ2VHDVUVH6P5jFXohBfvdz7hf6S3kHZYdCJkU9FA9k8Zdg\r\nNSFoEj9PDtPIyAYhFsdrKKUe8wbVlEkcRakHfTAP/kL263U8BoAMJQYzOoAt\r\n8TcnbV+2Mcky+/X92CdxUedhh/lq9v1etBHAo+mQDXmep5tqRGU2VJIdNNYC\r\nSOyiJ2Sh2KyNBvSi532xb6B1/rjRZM2sFArjQhcssahvNDL/85hR1OrmWd5M\r\nKZ9lCS5Obq1A3bc4vx7CmaTxfMhEQxfIkdkfxPlXmLPUsns5gHEdzLGBzQF1\r\nFy4vIVQbXXKO+RXE2+yQTBaM052OdGwNdMtOBuZyGjhRUHPtOFRugHskBy6f\r\nekwhXBD3kmqE0MEm87x1+wHds717p3ZZoMfFASzjClIzIUEVpFA2+gBw7obj\r\nkTQwyLgxmpX8tTtPZlglTy+m/ISMRZ3xx2J+hXb0Cu3sz1WP0gTcHAeqfJBZ\r\nCp9YwI8tyG1yz05Zr4KfO7BD0QXEXoy7WRzGeAiBF30G+T9vhgySRUL8c1Q4\r\ndUVMYbaeKAT9pooTWSs5/SD1l70H/i2OdapdPFy/X+iz/sjlY9bJihyYpyJG\r\n6ClRId6rt+uxdkh9STUhH6KEOE2vIutu6QrjJIu0LEJVIWNBxE0d6fawD0Xi\r\ntKiqVEPSXwtxtvR1B9TH++98PHU6Vb4bDGY=\r\n=1otj\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/stream-gallery_1.2211060024.0_1667895962956_0.9856875637687252"},"_hasShrinkwrap":false},"1.2211111611.0":{"name":"@bentoproject/stream-gallery","version":"1.2211111611.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211111611.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"f9c1138144838b5c4612a779bf407d2b2413d105","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2211111611.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-DMmpmo1ywd2pT880eLwlu/RVBPudyJXg/sjsqoafl5ezuLdcmmf5tQ9taH7G2g1xAxpGVIGUZYtXcUFGO73f2Q==","shasum":"f1155d713a1fa243e9ba91616740d32ef6ba7aba","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2211111611.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7/8AZ1R+fNd4xiKl5oCopT2bufUuB1/o0TZ0v1E9qYAiEAic/eWpvlf6yeWDyWrIZUHluZFIbpXSrigiN/7Mjq0GQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjb1hKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC9A/+KLwIn/nTc4WbIFhc/bghmSig1lOSYBDK+io6z4thA8onIBw8\r\npIhMtunouGhrMp2f3kaVWwQRtf1egCQf92oUgZoigigH/LPZvXv+njeNfcD5\r\neTmsqk77sHZy9fJwWbDrofVhVuYraDqdeJ6EInCBlI8OQoIKKBWHc2gMPxeE\r\nhW+ZLkhlqY25LRYB+0yhr9DUZx5UjQHv+JBDh6LI8k2YLDF59MZMj+E9lPjB\r\nclnFeujtlSxtM5GvLviv69m0sThSFE/UYUBKkKkpTk13zJW3LhBaZLLsJ1/i\r\nsj9D1PO0/FN8ayTaAGwuYIxp9JsX+EAOfATTu1oiKgoP9dAdpQ/8v++/KpCv\r\n5xcVEptTDYKEp/+56xQpkiVLqUvgpMVRXcEEppI7c2OqxZg1Bvrc8KJriN0b\r\nFuH47hyZa8/3jWKAuGiw+bJBF0ijwHP3bsVtc2QaDYRMAA7M+KPhptKP5yfs\r\nFvqGWzi45EZhE8nbK2vkC1tneF3zuhWkqY8+er0VBiP9SWzTVs9YNd8xRMP5\r\non9X1xrPI5BLnj8m0V0Tycr5GDqh3/Ogxe7wZe5E01HxZC4Iw7yangwSlmW2\r\nTphbC3eocKu0B05eeAyyAtiKF/75JsFRSl9MS+WEUUWb73YoUYU6VtDh1Vn+\r\nobcXms9K2oZ07qg/2FoAhqiEM07u8lYke8I=\r\n=LodB\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/stream-gallery_1.2211111611.0_1668241482254_0.45044703295877286"},"_hasShrinkwrap":false},"1.2211151402.0":{"name":"@bentoproject/stream-gallery","version":"1.2211151402.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211151402.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"db41c24bd071b6322e0a5188c4bd74aa94cb9d5f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2211151402.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Qifw8qdpNd5FsOdmCTY1Sl21fOk3fl/Q5c5wb6dw3mKqu03HypTqKBM9mO7G3UpUzJXLbMlMv7IlqRWVNbFSxQ==","shasum":"5c95f6a2740e137b21cab9d07c662143ab2cf768","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2211151402.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0yHFsdCWsK1RrEBIns+/QErL+1JCVwuYJpdfN58lZ0wIhAJOh0bw0UYI64u7CqCmab2CP5Trrld6GwFsVU/USaTUB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS4uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptSg/9EBV9BbVQGrxuhcevEb5qQzgh8PK1n3z2qPJMz1eZecvD2On2\r\nCdGkZLUsWBvqbAAHf5xti26drXaBJ1/oTM2A/QsurxQCLwfyAchW3R+CeNYu\r\nQ6e7b/8xonzzNjQgfOjREWMLqk+ft9edjoLLdaMVdsYK9wKZWyOIQEtGHQzK\r\nRzVNB06aEaOY3Xrbafc49UVAiYVcL++9E+mqn10ZybCFCNzwvCh/IXVZHW/S\r\nhaenTHE6H9OCgQKzjWdaTzqUnCU7dpQEVj2XcRbXLQ22cL36LdJbTYzM0N6H\r\nlsHkF176Ov/mqR9EuYSyQMIu5qXiuY0GsKcZfmYkDqOHMlyw2TKBWS/CutCv\r\nIl/gdE6a1DMBsqeOEEx46zbpUUlJYUDnObyN3kyyEYmPpNyuNXIvDi8XugvT\r\n/v0SgnpwZ65riSpK6iJPIzkRUibpM27eBn70z2z+J8hqZpj+wYHBXv7CITmK\r\n8x+LV+pZvVEqzl/ZjH/1GZaocmQTaySli6BCTEWIEvhxSoVnaBQdNwwZOx0y\r\nGoD/O3abMeVtrK7t40DkNQjJENSq3Xdn6V83sYrqOKs+DGOyrZh/ywLC1mSZ\r\nPaocUehH1x4+1kJQQnJ8jt5ZtkxDFayeROTI6glMAmfXgvfzQjXiWow1P6zi\r\nUMhZXScWl62gHTGBnzfoFWhLstNyCCZb9AU=\r\n=I9nh\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/stream-gallery_1.2211151402.0_1668623918557_0.6349760707740106"},"_hasShrinkwrap":false},"1.2211182146.0":{"name":"@bentoproject/stream-gallery","version":"1.2211182146.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2211182146.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-x3hkkXTao+8rbWHehgR5TlpCAZJuKxgNdZHBz1SlFL4oPX2GdhodndmXLa7ruXKuMlQSw/d3rvYCj50dqZljcg==","shasum":"57dd4b9396af6a7713103b8989d8a9b1bac9973a","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2211182146.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqVowEXrg7K2lq56sXWSIKecj4HpXaMfVd1uX8Zb7veQIhALsheGdtYN6PvLbdwsIuSdA4JWqbec0n6972K1xwrukS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJMNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqlsw/9HWxbJRtAgB4D3S3//uEynGDj+BKb6bYJWKRh1MW7PRGCqjzr\r\nH+sKYG3kk2zrvU9qujVHNDzOUSjNmW4TrOnYxjI//qWDmNZ8lhAlSc/i9rjH\r\nFTrEmreNsTnvtFxfSVVF4WJFGn2mZIzFAV9XsazwuzeZVCy9wjzm0wA0mH3j\r\n3BHeKxF+F37hFa/aGsFvA0OOxPzl3stlbrXw4qiBp4d48DNiCfWvvalznun/\r\nhC4HglIxE9JGP6BN8od+Pn3UMAFM7wpiTq8buzdlrgBOyEFfPwU3fpAGvja4\r\naWz62Xu6S2TQeJJvYrjnQFDErj3OwJ/f28ol053X3xVW8dBkBek33xT76sjO\r\nSorekS23EGiBxx5MeY4Tw9OWlfk1yNQtoJC+4cWBAchLKLzYdyjRc29ljutO\r\nMlzdekihcbYUViMWcg6LjGBb8QxE5/0wGjY064v9dH3HBoRw4bl0scXHitpB\r\nsjmNokhzb2w5C2Ehzy+8J5/vD4mCG2sUUfToUm62Ur9zihGKvq+o9maFmkV0\r\nX30OINWZ3WH73FmK4o+BL+lYqibMGuRstZqPIP/hTsqI5J4mHv87HUQHK2HE\r\nzu+XGKpS1TD2b9Hd0F/VD/QQA8RZWmMSKWgNfqhZoQU/YS7HK3Ej+DL4xCMr\r\nJDAzhxldlfHzXFpPGtccYXl6cDNLWPzJZR0=\r\n=yjmA\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/stream-gallery_1.2211182146.0_1668846348823_0.2542730555421022"},"_hasShrinkwrap":false},"1.2211250451.0":{"name":"@bentoproject/stream-gallery","version":"1.2211250451.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2211250451.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-8xusxEf74PrDeeQIFRPKgszQ9KKwPbKX8UpmIaDB9STnSn8gxzbXCChnHLzoRUFyJA7yN3SNU+LYHjub2L6sqQ==","shasum":"313912a3926e9acbcd103ff2d6538ab61e25a1d4","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2211250451.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsKopigQh8/x25+Hcb2T3WPrc+fy9SWUWV9XMM58dkOQIhAMI/9te0oYCmlcoCyJaEwWlQgfVr29F30Z+yZSqfrdUf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjgHvAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrznhAAkqPtV5iV3B+8TUx93Kcjp46mDiHc5L3GLRb9xc0/n3w8cwit\r\nX8yu3eT9YCqs0+6UotGjuxc4UC96bk4flrRToeyI7Pi6+urhLKGEUhL3CeYw\r\n9bEhF6jlBteqsPP5hV2osBJyASdTa90WFXLujbhLBUkKXb11/TLX0tgo5R1l\r\ncliQ60114v2RFr1i5XbvamH6Mq4Z7xzpEA5dM2734zFDdkLDdZkNKLg/SCoK\r\nqb/4IKthN7K9Fh3sfoE5Al5Og8HOvcSE2Sf0kkShEaT0G40dqnIoG5puWBuO\r\nyQ6Ali26fqLFmlJ4SdrZgA04XIp3MDq6Wa+B5PHK5BtSrDfsbmJ9L2XLdGEh\r\n+5MHdian4sSIptvk6FhENzGXwlBj98oT44Z87UNMZpzlhJ8xol5PVK0ne1xn\r\nRhqD8+9TDpVTrQgaNy+LykuIx8JP4Ab45pOWWmBNoHj9qXQsHNoCP8kJRdPB\r\ngCAb1MMVkQ1ITfSim0fHi0wCt49xuHQmHwQAu19dRS0GhAOPGL0hNhAjVFjc\r\nlHwFNl3jCJjAk44WB0b8Xf64mTfTLnZ0sK1NhLmbQgLWTYgKOtTXNxTHB3gG\r\nJkGyyFeRlEQ8V/Zp8Oq62xV5ao13lmocpXB+JuRz9U3BlesmGUtHFWBG8Ne6\r\nr8gzLiIHfksaUHTJ/vTgmOG/DezIH9Ugmgk=\r\n=95pQ\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/stream-gallery_1.2211250451.0_1669364672498_0.27833134367617607"},"_hasShrinkwrap":false},"1.2211302304.0":{"name":"@bentoproject/stream-gallery","version":"1.2211302304.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"8ec16ecf1bb95c1a6368ab455a6cfc7b1caddc46","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2211302304.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-VtCn0wB0TiG8Zt+rmyMx+zPjiIMvNjaPsY7tdWL1A8gU3x5Xth1ZSZEPz9dBVOj3FpMeXuBJwV4LXqQqvy/3qw==","shasum":"a07847b9caf492031646f5608ac17f233afb0624","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2211302304.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnReQWzJbergoM8CPj2um0HRsG199MQq4bHii7Rz4J8gIhAO47oi8Eq4zCJvorVzkX2xlbfdqDzloxXD5bHfByc6gw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiGSlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwGw/9FLMhz8M1ytN0KFC1wvCVO0/e1qEmsEFm21VM0IHwd0UwaAZJ\r\nj7h8G0TjarKzApo7Ui7TKANKlALchvyR7fixWmAMwu4gXwaCMDQsE+n8VP8j\r\nPBeUWF5nYf6Rq3mo3ClMUucpxLhpNBP4/kCz1Cwdef9BGEUmOKPUrVOWiNGh\r\ntCMJCoPAxZqruTT9IRFtDAVwUK0Z9Ybbz4GLrJuii/B9KjTnWwUVseX387bE\r\nDmQw9BUIVNVKaXMNilks8oEMPU1CIZNmcPsogaloc13Y8vc3OhXSYG28n/xF\r\nMM7CWayEbd8L8WcSsmEqZryBsFMc2RzohWlGMp1MeFsBhC63EZQ0HRwdtgNB\r\nrsVBaJbRg27vi3VLmnu0gV4F2NiSqatQP95coAL4yFcTIdY57z+HZ7E0Tt3t\r\nmnnP5UMMw5rb/kSOiafh4/ZJUCTydB5PQwUHl1wFqNHA7j13ngOVn9gTyaMW\r\nDoR70WajkYqEszFibznB3vwYz9anHkloCf24H2YoWwAcotKBtAjukHHH1Xxt\r\nPjpWGrvBpsjFgDrqviEE1A8q0qYefGZHd8AS3Nu9/Yjgse+MdoUPgifFCwDt\r\nXWOsPmVVcsFyP1nbVtkgUrbi1v6IOLkSgzx1BSyLV/POs+FLMqwdo+H72gXc\r\nawlbLWHNfSMH9+B6eQoSheRvf3YAQYI7N4I=\r\n=/EgZ\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/stream-gallery_1.2211302304.0_1669883045219_0.3473450370821429"},"_hasShrinkwrap":false},"1.2212071834.0":{"name":"@bentoproject/stream-gallery","version":"1.2212071834.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212071834.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"9e7a659da459058028a29b649ceae3a2dda7771b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2212071834.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-UcHK2lyh2tHUo0BBuY4ioos5Rs78ZDyRlxrf18zwkf231FXQReVZIuEnFdANP1x3f8LHwVqpLFZD6qRX1I56aw==","shasum":"a41e6505d3d4769098e3244ccd4cc557eb83b3a8","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2212071834.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBuIuhEmYnEVdlLMjc85vehj9f7ugIGr7Lek74EHRizwIhAIqJjVMSHxfDl2UlhDpkFXdpNoMSFBGNBmOfeNgoYzjF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkOtoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovYQ//XtxyU1Tal/6xWR42YgV/t0bgkNVLgitzdF7aLOyxbAE1L6ud\r\nsw64sUp5M+JhExyPYqL4bv8MBXyUnGQhLc7rMfu8vQVM4NVJBg9xxMuB2ULa\r\nrab/afJXqd89ic79/C6yLXLfSuNbLMZHE13C62LWK/bi9gGVjKhtSkOg0Fw/\r\nOTyYxf1x4gePlvdI/78oEpsVCJ8eS2UPHs3HdrGZh/CcI3htBHEhXVnnnnCo\r\neXbGbM3KQ8zMo6zZQ1CBIquhmBO0P2GqM95XrZy/wcac0qspBtrEv9oyGdZH\r\nTTLz8mqIpbGc/o82J5cMTHFk3Uf0kKEYqHrWrhZyUATZVqufORmu7SjyHbL2\r\nVryeGiemtVKVNmmuJPM6gA0xGZIVecNmcUWhgBvT+jhoPs1apwYGc2pivMKq\r\nFdMZnSJBxLuwekSStsFYGnxx+VFtNQkZ2VO0943eLqN19kwVpLMBDlP/xY5p\r\nsZ4AzoYMVo2BZ/9+ArgnRB37SYJU9FTNRcYI9ZZVo6QPHdzc75HK6Ai7/ZH9\r\nxu0tW/krD5sKIKLwnm5ghUKuRtOIFBg3u7gKvQoRaYslp0RHo2SfKgePOuVk\r\nfCQ8AZXLLx1luu6ovbESsLARmF4yJjJwEHNfhiakJ1ask3b496tz8E0Jinkz\r\nvCsT0bgIRUhzBDhRn927Oz9MQSwSum7S2jo=\r\n=ORMF\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/stream-gallery_1.2212071834.0_1670441831940_0.17123520966025985"},"_hasShrinkwrap":false},"1.2212092023.0":{"name":"@bentoproject/stream-gallery","version":"1.2212092023.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212092023.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2212092023.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-4xHnq3cRQ/oJV2vMTDveaATNgSVTQmh9zlVXYvr6TDlPBCjM1l3BZ/6pyDY2hY70dQ1Xi2G21n6ft3UP77uzDg==","shasum":"8fa09c9aa258ea0b3bd769f65bd27752c3ee2470","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2212092023.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfMGOhIPclqp+ruub81WNSQjeNvPysmj7rp5a5JNPjLQIhAIJ90uL3Amv24bJ6+Qk/+wpL2vmhwMXGr/ZTjSD3AE8R"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlEJvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofMQ//eyEpjpQVRzUHqW2pLP0NzzMX6d85pOlQ6cOYdElXmXenaOMf\r\nEkiDqCRIlSiGkEu38Jtg0wHtIhKRppeBnXWR1ySycUmOg7KEMPrsY63WH/UB\r\nTz3d95YUWfsQ6WVlmLMZ3/6F8w9Gn5gfwGMEtNWvvWaICuuAMMNiDnNHMbOC\r\n6D+cTLzyuLzEr7PRJ0F6T4/B61E9YhHo5VYlYPPPOOLppEyH2icln4dzakpO\r\nJf4TqToBLB9AKfpV2C2FpNEDCD3vF6x/zKyDsS/pkg42XiTcM5swCOmu55vT\r\nrwluclBstY3oSysGQKGN3okLW63w00qgHNhtPLhHMenRpPExreEiVqKHqvOo\r\nU4sLl4jUyyNiBn8x9HOo5lUw6mkaC6ccymjBGLNqrDuJF65SI8tLiF/VLsR6\r\nHoV5OUWepXNHrEZM/p29sHbd7JFeJ14XyfkV3RmLSqhf6ywPcPQJdteoiyq9\r\nEwTxafQ/Dr7FS534dr2tRGnDwlp1au621ukYMiIIUawnRZBVgHyE2um0zUsq\r\nVxyPz4tKuIM11kdaTmLy0H6QDyZZUoupoRtvNHnx6ariwRlImTtE+/V5LdHT\r\ns6baCEv84zMJzsoFvZ4y0IUuYzOcpaXN38Rz0zBVA7ZL1lvene31+Qdec6n6\r\ns0SLLRVnHBqprhimMG/MVoEh062Lmgq1BDU=\r\n=H4W5\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/stream-gallery_1.2212092023.0_1670660719350_0.2582042458055147"},"_hasShrinkwrap":false},"1.2211302304.1":{"name":"@bentoproject/stream-gallery","version":"1.2211302304.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2211302304.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-hEU55qBPrrSkei3owdAlT4eDVz05VsHUENC+VuXddAW+ekjLAQ/YStwbnQCLyzTA0UZBF77BAEctJvvhpav1og==","shasum":"4d3cb523cd380b9dc172c56a863a7ec39b64a6e6","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2211302304.1.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk+Iq6AZqvPFnyhs6qUtiM1VU4DBvw27rIzofu6jXpCQIhANsJEWO/jrBCn6EfQ/raJ6wnc8ISQfuSuMVMhgWMQJK1"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPQsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwVA//W89kTVN2ULkKlHQQQFcDIXZVBeMiVaJokRyO2EFOXpPSvr9/\r\ntAcP/rUjoEGphRCjV0kFe+fE6L55dBIHr3+ZBys65RpxqbZXuETrA5q1TEKc\r\nssa7DkAPqUybUxPhO+iuJLzZl+jd7uWxRLjI5dJPsti+NbH5QZJR/WI9oISa\r\n33K+zYorAya/WAhDoVmEz82hlgSx3wo/RLgw8zxhIXISrcxdJnof3qtQQpE2\r\n47Om52d3ynQIbp8vzLV4RroHX5lx0QS+1DXB6nJA5MbMvRaciS/mEWZJE9HO\r\nY+m214ar+h/komr+i/ZBAv7i1uNBTvD1R0x1z7NixrZAkeKTMxbydnpj/cbK\r\nlUc6+Fnj6oDAvePGrrM1SoY+LQ3M9o32YJGeWWt8kqVBpd6+N/fj8+rfMHDJ\r\n8yEPM2kCSSnoV2D2FXazHbbkWdqqI28feUeTUOU3TPrjGpc+vKgLG9feVDBW\r\nQ+874yZZfqon/FTFAglxxJJp1JttejLbPyViVOv32yOHhV0YHQ/gClGp8GlL\r\ncv0GxwFXSndz5tqshDFjXLdiPwEFt9tfUe+dfgRY81Taq5N6xDDPfcn2VTxB\r\n4a2qqTumyhCij9Q8HfEaaCqnlFMl/7ybNHPEIrHjorPzRRESoEH3tlgrPVBG\r\nY/0ioApKG6EVt4cUqfTTt5NFWADF03Tf7V4=\r\n=C6XT\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/stream-gallery_1.2211302304.1_1670968364063_0.2701531462744313"},"_hasShrinkwrap":false},"1.2212151632.0":{"name":"@bentoproject/stream-gallery","version":"1.2212151632.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"6754eb8b2feb7d6eadedb57776b91613ad5d6dcf","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2212151632.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-8RfnKaBLf8E6td4A/HbxB/IY9fIgd8dgprk/gzg9DvObdC+L9aQs3rEMFAbVhgXFWSIyg4r3eZY5SKaY26jHbA==","shasum":"5a7683494185619a0fee990f89edc3cb66bf07db","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2212151632.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHTNuEu/uu37WXdK9Okx0PFX6lTRLexoTZovdRRI4byGAiA+x/q7Fr2xT9efxnUvN8pSD2ND2YC1ZY0aHl7DvSUSSQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjodokACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoofQ/9ExWIyGrp34BeQ7ehNp37H6JxvXXY0fyUb3IdwgQWAnJSX9+U\r\nZ6a7MfPz860d/8oF3Fqrb3XqLXIDW7NXP/Yx/lrEAmJVGCDoJvLb0+Z7rpyx\r\n5lnmJCrl/XTCFNdxxcGiZ3WvtLms4CF7k7YQdh0mJYq9O8kWsdJ0Efk9TeWI\r\nlQO+/t6nZD5ZdEJZNvHHXDJ5/R5+yDeL3sqt3cErwheBw0fwre0DIqQnjr3Q\r\nZe8bgp0b5M9eeLCAXVVbVQf2VseP85uul0c15MKh+QSlTuPIQa6VR6lQQTBd\r\nIchTNjPITui72b2Q8/cBXIO42+nzOjINz0m+nFj9EXt4g6OleIUB9uqG4BLB\r\nyFv6H0PPhNgq3sI/4wNssQ2aNtHBxxGPaXDdTaBLF0XjiSimRg4fq2mnzvLv\r\nwqeszI8M/b5mpitJ1oASUiA/TlOOw5iXiEfhDEaH1i1kM6cYatT9C0280rfV\r\n2J9cWfLY4kybzKOjTYs5FF/H3J7/3osKvqBhMXe7o0vDNtHsVnclHTJbtXSX\r\nyGvo4s28Zi5Pn/YJAHK6YL++PkP6oe0qntbjmrYqhDUuq4o25RZ7jtF6LS8i\r\nie9Mst8Oi3H+Wnu/rzDPtoBmNR1RFjTe4qbGiBz5EoZZi17Ra6x1YGO8MPEa\r\n7Isxm9QISwXfefFqEuQpWDd3gUNyhyxX2YE=\r\n=XIBs\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/stream-gallery_1.2212151632.0_1671551524659_0.8254353772869112"},"_hasShrinkwrap":false},"1.2212151632.1":{"name":"@bentoproject/stream-gallery","version":"1.2212151632.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.1"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"0daa515ff1e284cb2e31dc8fda7f29c073e60b60","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2212151632.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-3wLzZOHuy+CGpUokdbZBCDvBRBE/gOUJv/I5Y2NoxYdm7bWFSThLwCCJQwZ4MO0sA9EpNCrDuaYxzjBjP/8+gg==","shasum":"8a1b241c6ff9aae1201808101bf99c0e22f16fdb","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2212151632.1.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaQEBxsoMerTUJICo/NJYfanhWgX+43pGJGmlJcseqJQIgE2Nc47T6EmlWjeJEx6J5jEhQt3baclz7kzjITzOno18="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjohaFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqh6A//cFNQjOpNDW90X46ySORRiR3jmISZXRUyLiA556g4M5SBFL3b\r\nA/5P444EUJxPHVq/DWWFKBcJm3uFX7WCXAMkBqq+NlQPrYqRTDg+HLj4OyjM\r\nfgKXIJEyF9lLwIs8NcvhwTA8LGHexP2NEx93fIAoM22Nb9FEqcuKCwnQQ+Cx\r\nFwKPIbR0m6IUl5HHHso0rukMrqGfLaSOhTNAylKhqXQ2IAPEHQeV7ZhduyrX\r\n2y83BU66alGe2kJYxTkRzqBMwjQMpbm3xaVty18UnfpNxcB81Grwmb0553AZ\r\nAt+SzHrLOr9U57dSYxLXo8wS/kURjXGuBXqHnvK2/QEy3diG1cS3HBVHPcsZ\r\nAYDJ6pha2hF9b49dhhVgX2Kus1H7PGB2XgBV8i+eE8Apbtcd1o0IsPZEBvCf\r\njRzEAsQtoBWtk/8ROpuhCr6AsZ92KApPjUV0jZ8wqeoFjNwUcvsQfFLQTu2Z\r\ny4jcMICPIHGUxcwMDx94aTC3bP3e02eK4iacT0iEVNLb6y94x5DXSVbkwALw\r\nJn6oSgN2AZfiN0Cj0PC39YFhUQ9ery76GAlW32EpKeCxZjZ15Kn1CudK+uZJ\r\nQ8Ho8SMim4uR8OUnVr91Gxbq+S9OmD6VlsGhmXhejLnYZ7Yb1qthj6biuMvA\r\nuqzW7etDEQOZaZSkeLmtU2nkZDz2fLpTuk8=\r\n=5o5p\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/stream-gallery_1.2212151632.1_1671566981079_0.49208747339993497"},"_hasShrinkwrap":false},"1.2211302304.2":{"name":"@bentoproject/stream-gallery","version":"1.2211302304.2","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2211302304.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-0s4ZXWbx2rsKeqB9vrzOos15XyDyloocq/Bp6IzKHlEpUR9z/VdKWIY8Rp6oMXvBu9rhQQ37gArAN6ZXia/Ovg==","shasum":"9003e24c1ade8c8598d9278758c90f99bdab7eb4","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2211302304.2.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzIkQdHPBRqMjgHT++yWG+KzLgWJrCBIgdFi+bTikYmAiA7WyT4LvNSQ4a4J6tQJFsXoB3GgfyFaL7qUhgZhyqAHQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjojfmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolpw/9HL55kNhMd4Aq6jUXJJbWFSczmgCGjeIH6z3ggs1mUN04zIDo\r\nVTzF10zp8awNJDLwUC15QRstls0pIlVbShp66I85KVCeMDOEh7VqrY0sk43G\r\ngPuJjhrVZpiECF2zmiCGwSYX4GoMhf70jyuxOCzgdjHv1bl3kvDa+wIrL0cx\r\n3n1drTjFRgio3viVuawqpnwB1pJQFrzBafpccZGXXbk7p8P+Kro0asRtMAxI\r\nwWPyGfaBxBIABiv886FqWFtZaE50qqkC0gUZyiR0nm989+tmFnLehHyy9rCA\r\nFAyRU0BEXuSji2ffrwqdLCv09/TL42d9hPfIoqi9JFKDm6hH6lOyXvFx+neo\r\nq9h3tice1c+13qhoG8b0ate4Rh6X7Lmnhs5LLJDFja5vhcX1H+WvCQd4YSRb\r\n9cVGt931IeZIvI3F7vEEUJp6I08q/Bg2SiCMFwEpjIykaT7ZCbTpFH+IpIPS\r\noa430OmAfDYQUJZpXIeyCs1mgPdZ2qdWjU7fT3Q5OCB/Ryc76b9/0lzHVj5P\r\n4E4c3GNR4HIiVyQSHDdlS6x0J6Ib/yqZqKNsRciHEZFEgNAk38uNsqOXZpBt\r\n3NxBO6XHgwPvlBCR+//ZmdQaQphsozxvBT07efKWNTFu2HqBhnW+fd58M66z\r\notgJBH8NY2VQ+ftHgUHqBBKkA4N8D5/0FY4=\r\n=NoiP\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/stream-gallery_1.2211302304.2_1671575526238_0.8801386823656305"},"_hasShrinkwrap":false},"1.2212151632.2":{"name":"@bentoproject/stream-gallery","version":"1.2212151632.2","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2212151632.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Q2OZ2uj07XmXMuQW2voJk+exq0mbDAGmPg9NxfD3yD4+B2UqoS8Oz3z6DvehxnBX2Kgf3vRTTmHVs0iCYtfJOA==","shasum":"91f11079ee3c7ccefebdd32d19e1a1b0725fb56f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2212151632.2.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpODTEUCGcOsnmrNDI0wbuaEQhsTh2S9kXparIXpsQVAIgLBfiN3EC9CDgpME7k1Zvv6GxNoyp1sl5c+cyustb9pY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtHAiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopKg/9Fp251A3kjp+XLm/yU8TxpD0utnm3O+WFgqzO1SSPV0Tr96XA\r\nPBZHR+z/e7gFoV8IGmOElF1tpIzuzPt/03b3hmbJJID2ngdlBJS2Fj9p+6Gj\r\naVsFk2aD45I9BfywrKsplrIW5KYj1IzwlnHAcMDwScYNldVzF9k5FwgMDgwF\r\nFsoYN+dxjNvsCg+Y2ne8dodXe5uQvBIWY9SyraFxHpPs2ZlO1vSwhIwU1t7x\r\nxNkuRJOFNGVb5DvNhcWoFRfO6zyRBdXESA3Sin5yJBWFgE/14tL00QS+RwrG\r\n1kO3jCgMPbWKn80WxmdSkgn4kk0HMZj5Ql9UMpMML81CkzWfOcsRbHNFmkzW\r\nI6SQL7HYSIr7oLh0hV9wfUOjinTBTKY7C5P2u6ls7YKrA9uwYN5MytZ7QlMf\r\nGDpb+E/l/AjKOSoIQnEueEdG3fxzm4IK43c15SLtLnl/S5EeUpN2mVAs6t8D\r\nol2xSlw9sIGsP+YnD04EDSlJP/pv2hU66EFCaFLzc6s+SVifCvXqqlZ92/8/\r\nuDNI+gmAMlE3RekfHf3PuM1+oWslpRk31TdycbRuwYGMLqC/UztqWRBFTv9r\r\nk8XreceVRXKASgBjv177KF8YsdDftXwG6dkPHn6BGjbt60JB7eOIHMC2u50N\r\nc/o7iq9Up1o9V3Uc/XCXbF8LsZFlBOv7meU=\r\n=v24V\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/stream-gallery_1.2212151632.2_1672769570233_0.8896098532111558"},"_hasShrinkwrap":false},"1.2301031703.0":{"name":"@bentoproject/stream-gallery","version":"1.2301031703.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2301031703.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-GbzXdsxpwCvHsKjGYkAqf7f4v4857J+RlkC4/GGZjQchq+1b/dZgtHAowSxGawggMXPyLNMObHEvsD5r+7A5SA==","shasum":"c70792fb0967556f66ed43e96ce6f83cefdf87ee","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2301031703.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUgH9BjowQOq3FyuleYUnlAdEU03Nr25pLzZ8eevyl8AiBXZ8YM455Rqcmx/TspK6pSM78ahnQXAs22Mtxfn5yWgg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtJBhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohRw/8C4B0oKDHE9YEuao+c/68j73AygZHZEUi9FpriDEzrVMqid2W\r\nZigSG/dS0UewzjTXX7OD3Gq6upYAItTSQomTscGpTkNHZVgUL2CybYc0b2zh\r\ntMuEN3KW7Rk9ypPT0akQdUkPu50YpksNYkD0mKIAcakVUqr34OZ+Xl2MHLru\r\nBz4KmXqPdFC4yTBxT6vaLwhivEmTh8z/tmgeYskEmQ1mSb0Ku/N+YL1M1VP0\r\njqKeOzpDucW39vvThQlA7hBIeyhjRVa0G0z98XjgpRzE2qzlUPIeOLfOtV1p\r\nFE7MJdrToij26kEr7JXCY7F7v6dIhokVbbyoKQLssHqAhdXIUgptkmXDfisn\r\nJwyPnzeCdrj6xyWfaciWAIcuFc6sLm//+adB316Tc1dZpm6bfFdHMq3wkcJe\r\nWOMUvDXNzaNDMFBuW5vzQhka/pXSNKZtCh5HiP7T2iQOA3beIUAXcYe55gbY\r\nbYq2kGoXfb39qYcvq4mRW2xDNLzJAkzLE2pC3YAozO0tvXMbAqwqz07NcAZ+\r\nFgMf7OH/pwwtIzaYY9VA5tMfBfxhMpRg5V65O2peFLWnEINqtH1VjYkJmAsy\r\n1iAFkXDTuUC0QX9OQFhNIde9vV7HTFrbvGH/7N7VqRhdCTGv645OoLhwSv6Y\r\nPcCD9sbt7PMgknehsOvHF9icqeHoBBYvsD8=\r\n=Mejf\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/stream-gallery_1.2301031703.0_1672777825631_0.30899085459732745"},"_hasShrinkwrap":false},"1.2301032153.0":{"name":"@bentoproject/stream-gallery","version":"1.2301032153.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301032153.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"418b16026c82f72bf8e885668d34a40fe043c9b7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2301032153.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-oYLLG6sZCb9r4tm3VTm/ZPkcNNf4KcTgUsuK7gZbskZsJWEcnNQhckfVePx7EjST1IsP/nSGxziulU7meOYbEA==","shasum":"508ecbced042602232a09d82848d6b3252af370b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2301032153.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsesYhu8YNpjXYaWGw22x3JjvcC+Kt2aEwJQxR4+DnWAiEAoWFmQLxdRspa5oljEK3Mds5VvPB56Z5sotF58a7B030="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtTfcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXmw/+MUiEhg8yoqy5SUZeJvotKFodIOG4ziu5Z9fk1X1+xEF8eNw9\r\ntHgW1w5Q7iP59Sxa8OMFhs7Q+f5ajjdkOgySOSuoAdo5OEg/o6pFvNPNUws9\r\n0Oz1oAnd3tnmgB9GvUP2k+mejl/xKFOmkkJ9gVMNNzYJ1YnS5uSXP4YVyhfm\r\ndFTJShlRICMV5J8f6ezWBm7virnKI+BjLtqELL/QsNbdc6zTQ6YcImZxO8FY\r\nBZfhZ5I9XE3/RtBKCWD7ww+8OiNBB8HDg4QGeoS4iwY2q49uQfCodPv+7yv9\r\nJRw2V8sy8FTNFkEv+Vh5qFekDDs+yJNREnzKFHs4vI2pBFjUlJ1zuP9HXz6K\r\nV7Kb/f5DRFLYZEykb2kuhmafZ5Aa7WW/PxcFZE8buGwPKt25FkVC0FuCfh+0\r\nx3g+GJQcfk8jDBNE8vxmPGIIRChlrQy+wVfW15nF1ZvS6Ivunjq+u8A83Xwo\r\nO7+TDRLX+ZAGg5Xg9YvLGsIL5BBSA9QjQ1X34VyG4x7uJ9CS22T3I/zK18p9\r\nF2D9dG8a4jOgl31z48xyjHQ/Au+2vmgT+HSp/756aGXY3s3w0e3RD+UgSTsm\r\npANyrSSLx0YSP7iv/Q+Dbx2Qc4TmVVRpAzuP/hKy1vKPStw6DOMcx97VnA93\r\nLcLrFzl0P+rlTJi4/VpqtnR8KmZpvIyOWUI=\r\n=zWqr\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/stream-gallery_1.2301032153.0_1672820699907_0.24932009521588228"},"_hasShrinkwrap":false},"1.2301041800.0":{"name":"@bentoproject/stream-gallery","version":"1.2301041800.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2301041800.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-HOKhNhHYoRLbJJDyfODdmgcsYVV8OK50sv9SPMP8yZWAYWs/4I/gJ9cvxDE7NlnbTJg5/2z57fb+2T/jo/Lw+g==","shasum":"bdba4f61aec2f44d213b175bfc83407ad023021d","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2301041800.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0uty/2+1OqZ/PepLgvLWLi+E6wIMIkem/8JaBc1HwsAiEAzg5C1YE1jCLqA2jPSN1vSyh2B9GJ/lRsZEpB1gMueMg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtol3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpffQ//SQbSLi8nU1peCzeXbF5LBFwvs9SvfQZiYcHHK657/KU4VScf\r\nc/pWmopgG933GaK4+Ptbmutgfbosv07KczQb9P32QrMziklrw5hyq6/1+Ypt\r\noCf+QiCe0Y2roqyR32dVMEfBUPix+7XsysqEDoNicLwIb3kHgT0ZkF1aUH50\r\nGjPJlXSWJwUgHcQgDWbIUrdeL60IsgfuZHPMFMThKQEsU3NAmI3Jn630bWhq\r\n5afg2/iPpZdZK5hznCTvRK/MW/rBMFeYn0Kjoex/2K9WUVtyCDaJXCbSPaab\r\nuAHTznmzwnCT5g4SGe1Lc0kxNAB/0D8U6DAVfMQ8Z83JpAqJsr0dVzgy/Uzr\r\n18D/ga8YB+IlhSqF6DxWd4MD5eFSl2c4kc0LYAQhvnuxBKlt1F+UxfWN+39q\r\nj12Hf47qbIoWWrYl2/lv0FlDp9bD2OhX6h3tJVGzbmsfTNHwg5OxCs/uJmlp\r\n9ixOVj8s8971iu1jrjO2ATKxn1vl/rGSnHXbvfraylhEBEa1kakAF4ho9n4U\r\n+9LVtCmmOKuK4RtynQpyPLrQhlx/E06uBr5Fl73WYt9/DOb+y3127H873jyT\r\n3xzoH5fvBDIawOMxEDzhVYXBrhSn4gvSi9qF3nZ2duYbC3JudZa37HjnaW8s\r\n0N1/qkkv8ov5Nxv0+8fyNcF3T2Aw7llry14=\r\n=CuwA\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/stream-gallery_1.2301041800.0_1672907127332_0.7460344881074485"},"_hasShrinkwrap":false},"1.2301100345.0":{"name":"@bentoproject/stream-gallery","version":"1.2301100345.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301100345.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"12a8a2eb9a3656064439da35b736023090e7c78a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2301100345.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-w8RBpibXwOhCSRLsBkmldU7CD9pPQZ41XRD/lF1K9MNFYU0y7IM7225FFCEQ7OMl07+8bDB6Tjz84qp8EGTpHQ==","shasum":"d8a9331881e03d43a73c50a1c31a89fe48945008","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2301100345.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsH86RDLT26UcRV7bhaBa89mH87UglOprGdh+hPdoUewIhAMgZ6Q9ZaHoors7K4VSIH1iZHLMO9BjRvU0pieBZdswr"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvSD9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkoA/8DOVZd0pHW3bDZ8cWta4JeuAgacUlSfwfPRCEjfXQewtn0AKU\r\nTEjn8BicJnXf/MWG7EzrpHWv7L1JmNOGl6SJY9rNxF4hriSRDCAr5VL444ed\r\nQ+xobbDD9WPmtgb009/RGUf7NXLeOubtKhp4S2V97GI/jyOXw1E60DIUY15s\r\nDnAr1e+mbbSXrl5G8vUzkBHX3oCcPnphh8QWLBOfkXe6k0NnpbfDr9PXmOma\r\n/sxR39UaG+vTIieSpMn+CLC8MoiPF5hfgSL/TrzdywOAIICLDHdHZhL65ruG\r\nmtey1vSiB77rI4nc9/6Es+vWAQ4AS36lZTr7GESb6ndsCCJwngvZlnBqZTW4\r\nT4xCeVLvTQhJbuCOZxlVSQyIHLBl8pL4cBtjZyG96gElCloLOSbLtcGa0/4H\r\nuUYNV9Gtl5pLMISMiToOUs+IJ7S7/xJfyAuDiggQUyTlDlj7Z/Yemp/fI7XS\r\nKXjzaN50uZ1wIpSlldgTPd6ZtRbYWAslu8+WkuqPlPVi+OWtAx0j/gfJ+w5l\r\nHp5X2PrdRL+vaUa26pHeWzLWbRoUvHqXlv/Efhf7Vq3s/v3nRb0f3NyizIKl\r\nwXpZ9bMweUpNaOuZ7jgShiqEDkYNIrliOX0M2HMjbRKy0GwOAbZ+Xsw2J0tL\r\noLU8PVFfHmPUMYTeZV+tXetsZ9zpILfRfqU=\r\n=Yrgu\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/stream-gallery_1.2301100345.0_1673339133132_0.04122322160391145"},"_hasShrinkwrap":false},"1.2301112346.0":{"name":"@bentoproject/stream-gallery","version":"1.2301112346.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2301112346.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-2KYV3Z1RcK0mg2Nhh9yPbFlf4tU5qLZmPcywlmAk6A7pZOymZsdh9z00ti+RL0NOFyeton2oZptIxgyh9nSzIA==","shasum":"8ff712adaa97d24cf60622f3b62a3b08f6888201","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2301112346.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChOpgxn793prIK0/Jh52uWWxMcbvQT8vD+ylNcsb8MnwIhALLqoODpfp8msphpGc5zQB1sgsfm7I4tp/v74jr1VEaE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv8RVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqepRAAhEPeQatnwx6VrIqM7ajLQrZP3a3we9wP2jLy9G6ZRL3qzvuq\r\nX9KOsXx5QKwgb3EvJw+GmYqdOlHOkV3FRNNJB+S8DEEIPDKenBLnA7wMEWQg\r\nsFNbUATKmi0IJtFY9ICqa/utomHGXmFLe7Rtn/Z548cwmodYasBXnxtDpUmK\r\ndMQI0NeDnoqg6iOnOc+e6rGonUclr5pbd4bxcsZrneCOr3MdUMC6rSr/4r4Y\r\nSUw8OtJN4yMJk2bUmds+ihB4J7Syg4LpdjBQiuglXAwywkdWLWrEs6LjsBR1\r\nVknq4r45daujCsXAha+SNKJ9n4dQCjZDEk8SpJSRQWhsZ/jQ5uyFnO1E356N\r\nSMDYXU9iW1lRIlsKGf7P/nPUf2CwveeJ9C0dBdsT7PH8gAK1BitcgmHSpFun\r\nQzHxSRrjH+E4pyn804z9Fw1lo1YUZhH4OemCvUP6Oc6ma1JszzjLauZEC9Fm\r\naU3gLYkTvdMTzdK6lBvjMsZq2WyqvMbukYbjehjsVRuLYrqXtknIWCPL/1kx\r\nRBJZl8PO2v1rM9YdzWskhKo15DdNJL3J6TmirQu4rPQGJkHy46M72JlIskTu\r\n/lg9R1SYRHPpRBMqMnzUzZUS7h/IdCaqa+bHiNE8SIJNW6GkEFg9jGOe5e+K\r\n13BvppUIJWQ2IcbAcw8lLtboleB9KPUv8d8=\r\n=KTEB\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/stream-gallery_1.2301112346.0_1673512020755_0.051572665400870576"},"_hasShrinkwrap":false},"1.2301181928.0":{"name":"@bentoproject/stream-gallery","version":"1.2301181928.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2301181928.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-sT1Pzzd+c4nDCnP4yaYlls27p81XLCAnDET9DtmBPRQDZ82Vh4zC25eyOM9wa37cQLi7632yeY85xrlxDttR5w==","shasum":"26f4be2f0360081e6812e8855811a8788b9a22b7","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2301181928.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICoj5D/yA6hqXrdLGPIaOanKHozlRhLIVbP8R3POA3OdAiEA4e4gy5ny8UDxwEG/js7H81298JIRwyatTAUFVxZNPgo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyP6kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql0w//SHdH7nZVY3owk1TbcmBbGzPiHYzAZDghgQ1BUkLSQmdoWj7/\r\npjCF2gCSDq42zm1HkzlVjmLi+BYRPfcWSPaisVhWpUbGQgYLUNkvYW3fXtAn\r\ncft6mkRy8ufzQqOtszySuRUSEmyIV9NOfV5WWCI/BYAPnpO4fjFqouzcHlW0\r\nL3S7qHNsSvzlzvIgSu5m9skXx45jtA9u8EQWtdAMNvCTZKNBaKhAsqq9WYEW\r\n+k/f1gk4/oReR/fkloeg42JJ/XgeV5+TJaU/cRitYDK+FR30ut+pBolNKFkm\r\nzSUqfe0AKAZYJIuBOnr/S0DimqY8UB4gIEipETC6NwH70s5zZrhKM5bPGc6f\r\ny+M6a/WxOPkWFJ82WHff6uStWdLXsxLW324JBgYyLremP9oyvNBFZvpjFC/H\r\nExnKcyehScMR+0C0sBRG7R85MPaxPHZ/HJBUkChA1econ9gY7UEEQ+10DiSA\r\nFNlCNvT8dNtneCj0J4nLQxI0hNVc0r5wSOcIb0JrJxmzmp65h1PJfbzqoAZc\r\n1c89sOq4H55rgmlKYIpsMw2bV4ZU2vpgNjJpTY4xFI9v8idiO1LCyzBOzOlk\r\nEUNu6C0n88ODdaeAo8vksirO7Bisas6nKf92u+wsZxiq4C8jEI3WnCXNCaqN\r\nQ5uPxmIJdCG2oyKjx8GEXm673nW1c1j5VUo=\r\n=VOTi\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/stream-gallery_1.2301181928.0_1674116772707_0.9969284797610709"},"_hasShrinkwrap":false},"1.2301261900.0":{"name":"@bentoproject/stream-gallery","version":"1.2301261900.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2301261900.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-2LIzc5udwHeKf43FkrE4CEls8Ujh6gFyn9DI4ILZPJGo2VCG3DrKMBJi3Fq72Vmxp5Vlxw+m5kBY3xCaUkjHpQ==","shasum":"84eac4985576ac0f8891e7697374c65dcee815da","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2301261900.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh/txLI3QAZ2eYTDeAG7vuWSZc10WEurLJ8JnsIxi0/QIgK5ACz5XZB4S50XqvKt08cc6oac6jkTOsxVcvvbZup64="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj04reACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq94Q//fx6ANLFaUwNj3u6p08aCIxuy9+G9ponxRfcCByu3jcjQAzkk\r\nnrYU+3YTQDA25AYczbwOttwNg8tiKjDHsXr961yDMG/oZhKstlpTtXJn1MhC\r\n7JQfQosRMvs7LOLwRZUhcN2YGOr3BmV7NOFWplQIoQcyHRIHXdxW1e6A7/sn\r\nHh1RyctakfimnwuWDt6X+PXMGgzKKqsWCK0AfU6P03q6dbO8vgvLS6rX3ATH\r\nW/CTkrU1acvhLhpdEBfzKV0rAoB6xxdlh77te/oOEmbe+EPcolmhzo8oKzzh\r\n86HRpws2Ozle7Zw3v9uOAKnG/52+cw99lrgsQHP5tVzfCksSeDd1JWNZfkfb\r\nvz+EiHw+HwwcFUC98VTjypZ7NC6fuYcvtNyENFgvUFsqk5W6NOtMsptJSh+M\r\ngyoZWpMAxmhMEibHCfiHl+ltwm3omfSZT1lesRJ3/DiLqQvKSAraglXl2Yrv\r\n7RYNzugMPp5N2rzBqgO2zeyJuTBbHlMMqTJSnTKsflGyo+WnwwMedC3L0/nZ\r\n7a7hpeOWeGWipcXH8XpjUk0q6q1K/QI1x7+e0wG4PnPSHtI0YxgP5JDSdKD1\r\nuLXu4ru39bPtu/DH/JtzJ2zDS1rRJLgrEusmT929edaTOU/bOtbygweHZ1Tc\r\nyNlzJMIrI0mZH95oJYxw4wxhVRVFmlXIZMg=\r\n=qU3p\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/stream-gallery_1.2301261900.0_1674808030003_0.4144940827481176"},"_hasShrinkwrap":false},"1.2301301810.0":{"name":"@bentoproject/stream-gallery","version":"1.2301301810.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301301810.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"06d7a2baddf76737d7cde110a7b4bb9351feb38d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2301301810.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-BIrwR/oL/zRMar9WHvaDwP/ELI6ea/YenrpHgTwNMCgo5ykiHzaIWUViCSuWEs3iZ5gz8ECdSPSxbag7jo4new==","shasum":"6463c24b9ec44124d7603e839169a4d362564db5","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2301301810.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwRkSuCHFRzQwAIaOWACztrXb51a/mAuYuYl8zcjjjnAIgFQ97S3v2gnMYfdFO+DFGOJo4MC24d8EIrpQoUIEnC3I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2NCbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqJA/+KSCqLbVxKCO8oLBk3TJoO60PmslB6yPJ/7xYQ+TfwlqjX3CM\r\nZ8ACosW8ZvstOO0r4lh8XO/nIhksMHl7iAtlaAOoZX09n96Sh/GIsmoC/2Sy\r\nScERmluDr2q1ObAJAbwRNG+PY11/vj1bBIjJE3kLsYPKqXzKE8tLaGkZjEyf\r\nupBdAdZdRxMoK42qnRH0zpeiE86fZxtd6O0JptBePex09e3r6icC3m54x8eL\r\nggVuFMDgA9XlxE+WIkGnr7yfVqs1bTdsHLInd25fR0243cP36EoOdGTYFo4l\r\nBor6QtiyCuTpLlibeaaTtjN1lKjlraP2JVORTITPZLWhT/JpPFAfUWAEHUcZ\r\naRxzEbdLLQ8rzp5KnYTaMxiDQc1YUduHnz+kmNve8A811CUYBidbuaJSeF1f\r\nWmz3oy/ePX8kAUL4QAOW+19webiT2twe5+7mupBS1y6BwKdVZqbKpBNtQDuB\r\non6Cenh8+RmUkv3dWFTcTnxp6jO+D87/JrhS5jmHnKQt0YwnnSfSRpqKUvIW\r\n69ozxTJ1tgCh5OejYw7w88BuAzWjhekd6SqlY6CBpJvt0zPiHjQM/SOm6OPS\r\nyPR729jJHYwWlU+9rpoXzOCPd5T+tLhVeLce7Y/AglYTrCwbXBEBfayEAnmY\r\nBGv3iCUKq4WCl2AHrJ90CplYFIfTcUOU4+c=\r\n=GKtn\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/stream-gallery_1.2301301810.0_1675153563219_0.7933999715870341"},"_hasShrinkwrap":false},"1.2302012254.0":{"name":"@bentoproject/stream-gallery","version":"1.2302012254.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302012254.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"e4c14ac075b71415995f07a6bcc3ca93a8af5cc0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2302012254.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-Q2UYPRQlgeR/hrFZ8HDCw7mVfJR6XGQm8PQHTOt4bVI90sllPCm2e4TKnuQLchKkv9HO5S9/KXmYUmIvFHgCng==","shasum":"569f25a4c1e165420a71b4643443af7a8aec1f67","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2302012254.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL3Xr30UcgKRy5BLz2R0WXBqusT4j7hn2J8QmBqSCRVwIhAKG/3gy863l2ww7J83LydViPx5Qr7uMxUnDZJVAC61DF"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj23M9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvcw/9F/klwP0htSHog3l0ZvefOtgV1P1/Lhv7aXlPWyWcAk4bDJa9\r\ntx3Rm6ConTM+QpzGg54H/i2ielTWSpN1916eUn4NtkkwLVrZu4RuWPjfISUg\r\ns4hgW0WSXWAYlTlXEvt6pUgHezjsXVNVd2URJ5IruvV+ilHRfnumZDFBmXM/\r\naNCV/b7qpV+4leb9igXC09tIrJNJ74/KZifvQp0YL1N98zwCoauRU4q1LKjb\r\nTp8mG1lSLtiylla8EARylaeXbEvL+DmM4vSqDO3Qc7SmUDCDCQ6ec8AwLmgh\r\nKsTJtvXPLas+fEgusKXgf5eunLGcC97jYmPwTvRCCSIJxqfAf0zqpjWXf2Ll\r\nQ2V/0I1imMEPiV0F5Oda+T2f2SmoxJSWDiVVo4djty7hZymcqrL+ItWbyWO5\r\naDS/Vb0YD4nC5dNLjF3JkcpNH9LEUwyH+8bAr72Nv+AWHD7L4N5pQMbvZBjU\r\n28clMfUD2kUx+kHjQOcpxk6QfALIsd1lT0uDgWq0xrFfYJ6wxEzkdRnGg7SQ\r\n+Oe3SM26J3Kd6E4u14EJ+qXSAC4qndl75jRO85JxCGJlTBsLJg7ka9iE+wc7\r\nI414Qryc/aWvvhP1YfJU5z4kKKxWdl1Ymb9WExeMwXFtrwo3aKtcvWXC7Ile\r\ngbho2YkvBEsF3DMVruYH8RyfHFDQqqYAIAQ=\r\n=Z1IY\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/stream-gallery_1.2302012254.0_1675326268924_0.4348766957984658"},"_hasShrinkwrap":false},"1.2302021743.0":{"name":"@bentoproject/stream-gallery","version":"1.2302021743.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302021743.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"a27cd72c15b628053806c94efc4c96730603dbd5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2302021743.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-qs/jnR8xwPXEaeSprCy5jx1DI/enguk8GwMzf/RreFGkJWaEsnV245XjA0NvM1bfbBVxAxltEgMMTPAcNbctHQ==","shasum":"43946c07b55253ee0b54b3f57302ea92d6854815","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2302021743.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGT1CZ2mXd41a+/SaddBkFUYSanOASBGCL0JCZaz0z1eAiAwtS+sSg4rVagR9etH85QRrV8wb69YikNTzS7s72fdyg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3MUhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2ChAAgEIUhtLu2KdcCIYsbraE+7FnYLHc44bfE45DaAKoosHbanv3\r\nOssu/DsXPXTVi/00q6Ak0mBmgJUcVPcAKnKV1INYhhLpPgchaTSn868EU4vi\r\nzB3j2OWGCHnySmMBQKrGxVcp905pPCmE5zWcwBqR9++cnsd72MmM41y1d0yB\r\n1LFqriZtNaTg8wOIYqptaOtyvRwEYpKXKUX2arh/nRkbIu7eFhSyTx2KBNJ6\r\ncWgNZm4aPCkHN9TqhYZ21xS50igQ6yKIXwJizhuZ2KJcsJL/IBuQxSEl3mHf\r\nmovRB6JHcS0f2B5KQp21P88Kr1V2zWJX3Gmmmhe1HwIsoePlNaam17u4xYVv\r\n9TMxilOecr8zidrQe4KxrbBfu7MnMpGw/kdzPwDa8B0u/C2roxvKu0DtsGJf\r\nRGoazEwV04fkvabQBOMvYTDXDAxdjM3usswckgCuImMvy0o5fVO3PU+y6UWd\r\nicgrpu4LPP5sV04dFDzYg2C39G5+eNiYH7EoqKbN/TcwIyKNLgwOVcgnQ148\r\nmWNfmjUDZ6kWk2ELctB1VuKyimJdKrY/gNb3gHbseyJ/BgupBQ6nx6IG4znt\r\ndMp354pU53WAXYjI3KKdygoucY0l0ia7YADSf0ZzqsLpEATu2pLpusq4jANy\r\nHVX2/qw3LMrY+VIxO9rSL+uUjapTNszbfT8=\r\n=vVWt\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/stream-gallery_1.2302021743.0_1675412769575_0.9459451683278699"},"_hasShrinkwrap":false},"1.2302031721.0":{"name":"@bentoproject/stream-gallery","version":"1.2302031721.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-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/stream-gallery@1.2302031721.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-jzkfh6Xm9yQQo4fCZWJxM/0cVk65SpzQPkiwwpCCBcYroCpDFrrPujajjsG02dEWRzbBCNpKUVQu1h2epfzyxA==","shasum":"a6200c515c04c48503c33d37e249cc995a7c1075","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2302031721.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsTvCo6f7wY0B5l9+cqTaw4IsFL1fuOfAo6WXXVIa2qgIgcVNY6XotbGdKoRRsREqoQdGCIOMt5W0/5HBUFl9VzPA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3hZMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEhw/+LSHluGqaJ3PJOyI2ACB2yES1SjwLtjGU9QKGRGeh37K9jV1k\r\nBruPyfM1BRaujZVkNK5QhIWnPbEOooo10osgws+1pjsAC7cB0bLbmBTirUlS\r\ntn0FyuTyB7lbGF1WbCauBGPRokSZon3y63GzP39Bp1dBno4WmIAuhIoRyYwy\r\ngx2v2FNLWlUeBCQTUfMkGcMhsv7EG96o1xcctN+QtNexP0/4xlOvnmcjUyn2\r\nUwRZ5MA4Mx4zTOZdzt55Z5yGlhtPnafi/EQE9w9i3pGM065a5xlJFbkNkc+7\r\nOr+5k+JebuSUmXj+5wlfJPNEBMP03Utjw5ha56w58aAcmfgdlwgALlpPhXer\r\n/zS7COxdGUwNI+Tiujlqotog3CS1Y2jqWU6kCAEf+knPg9kNRi7gwErM1Jjm\r\nriuy1qXq52hXG5CsIGZLN80QpJxYCmpfmwOnRcEkQKjUHLrgpFp79Y7GFkSk\r\nSO3tKuXTKdGBgRgnvWEC9ZW0lyQ2i18pcYUqiuDLZ1EEqmDUZI9MW0gyooRW\r\nZ2dOwszWDKygc1qTmB6ukjsbQnXSSTDwmuMf4EcDnaqU95PupfxAO5iuxUbB\r\nnp2ROQe8Q2ecgNoED3+CnzSvfdhSLhicHJmMxK8TXoRCS3FytNRnax7juoPn\r\nHegjGIG7oH41aqK45h5HpYN9f2LdOCbVNVI=\r\n=ffiU\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/stream-gallery_1.2302031721.0_1675499084452_0.7954669003508166"},"_hasShrinkwrap":false},"1.2302171719.0":{"name":"@bentoproject/stream-gallery","version":"1.2302171719.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302171719.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"767b9ceecbb9759948c2b0db6f66c49097659f98","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2302171719.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-jTslGL85lr95+Avet+I85pnG44EBr+EI09OiSRRb6kP8pENePnmpiUkwxif5Mp/WGOcqCqqcOEyA1XJ9n7SYzA==","shasum":"930e143f8f07fd6f53a7b7776e7477b4fa315e79","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2302171719.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJyz9W0toAh0S5ed8ivgHwdtoWTyQVNWu7KqJSaXrocQIhALMd00DltheXK9yqWapIhHd6RUyZ0bXYFzGLStB4H2yv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8IsQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHog//W/9Sa6AKxGy/H7372jO4CmcwESGmTfMtmxVCB11h9PE0bplx\r\nJsmzkHJRzYcyBCyFu16OIWkcWezb0Cy8MLgTM4e1VLbx9CDO2H/TzYyZxtb9\r\nskwgG9W3lzr0caqMMBI8EMM9PD7kU39Bd4y7P2dYWMKRXlIU2jH//1fWU55F\r\nY6cOqGEMviuy2RY1/KTUWptTvey++EYa/VHgX7yQv9Sopx4QM1GHWKpSjUgS\r\nKIZ1fCT0W1KjCb5Q8KXOZHLyO2Nmb149FsweJSZi0T03JVpFzPTU1inBWDP1\r\nD90MjPr6fSvHKdYWVDheeeem2IbdkP8a8X2vYgpmZWXm1HMdoBAy6P7WT9hW\r\nkpGdaDWe4v5SUiUEjtCJ3yFI7grGAYVM4MxUcVOnK5YfZRcHn4ukrzBwGERP\r\nbNhC+AnGqPS0tuaYaO9iyedMZ2SROVoJ5vK9BhFvD19+Cdw5YGIHo4s/6GPf\r\ntbBp9wlwdl3IOk0ByaCQu8qiJjrYWcDPYoIwb+YMSWj4mAqhKWIPjyy0hL11\r\n5cADCGVfjg+QQzfWvYbcElM+VhsR/95UNNxYyFQEoazXAbxAjqND3TJJLHwY\r\nNTHrVMyc7ZA3oVvZ5Y7DBypjx5fAq3Y00O/z9hO4kXJeywBCIyODhNWesBqH\r\nFKPj0EPikkK2ooN5DqEI/dED4oSRhvWQruY=\r\n=FTXk\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/stream-gallery_1.2302171719.0_1676708624347_0.5042363240908765"},"_hasShrinkwrap":false},"1.2302271541.0":{"name":"@bentoproject/stream-gallery","version":"1.2302271541.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302271541.0"},"gitHead":"13cfe7f4354a82bebe08fd29496c4c7de848a18b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2302271541.0","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-hfmZylruq6erOD2S+o7OfMhiWi2eueG4T30t2B0TDHkMV/bbX2Dt18TmsXDATSZljMeJ+cXbUToILa7VC2Qwqg==","shasum":"951780fe7793bbad0a1561d8825ea76821b60ce8","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2302271541.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLZPAbrNjvFiFwJn5P4VG2gKSTjQaikCTCXHVbAbiTYAIgGQF1FRqVyJ3KBCV6eGJlJ2O8i8MCIeQteTc4M2diJIc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/jjnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDfg//a0JQK112EHBY1QFdCqMk93uyIFk5kQsR2nNRWf1ti1XaAfv0\r\nib9QtJZz6gJKj0kviMbpEXgRB2GKIwBtOrapLVOUz4lBoxriDY4aWpjme+rO\r\n6MOAa3Ha78uwFRP5Jg88/jRC/FXzQPsrgRJfMrDU6/VBwLLTIYtH9oqn52/l\r\nvgFE+0NXFXLoBhiRkTB7QtMGgV6pcOz1+0IJXSqEV/cqfD8nAPbtEm4blhUQ\r\nejqM4ocVLeoRc0B/HicLjAluiysa9eFXg+2RS9ALSi4Da1qooRK2sgll+cVE\r\nNP4ZMMETwDKURM5EW+mJY7vVYit1kYKX3RW5UwBw85cs1gYFWsAcgObmH+6l\r\nFQ4eKfiRjKuDBgNTK4Zkl0h4C2fZntg6Ds3pHf3H7No1ZbhepORT0AeXgPDJ\r\nVjugsnJ9oNnNH6FhS0EWJQZqRNIJEC2twe0IJPlEK489XSsApsvkYAIdWzq0\r\nSK3sysqpOn5hAavWTlctZHf7l+rYRN8HumGixLlRqNoZyUBiAGS0zFU2OUCJ\r\noc6in2A6vKwiIVrBM3Gw+NMRcPwoxwVr06b8AedyovnrAdb2F2NG3bVHTVNJ\r\nAH3zBUI9F4WJQRpNTyG2PkTdqx0zpKgkuE4cGx2sS0ryzGnQ+pacBrTnfgyn\r\n0b+/TPQPV1nhjavFPydt8t0FVWKas+tdKog=\r\n=PfR8\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/stream-gallery_1.2302271541.0_1677605095557_0.7343958569756923"},"_hasShrinkwrap":false},"1.2303151529.0":{"name":"@bentoproject/stream-gallery","version":"1.2303151529.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2303151529.0"},"gitHead":"d02f1bef730eec6d78d3f2fa5968ca88a60acf17","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2303151529.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-AoLE1xsh11I8BhsJlqQ9lAURG6qYSx1mp8EpaZBznEeHDCGMEjf458kusXgoxFnr7LjjSG8BJTtzebkSfuW80Q==","shasum":"8b0bd2fad536de7fbd3b2a08f9059019924f5d8f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2303151529.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3618dFLdJOBjrP9YkJxKxcTU011eb4suIir5sSq0wIAIgSBHRAgL/n1NKsVZBnc47W7tmaKe+7sNAc1G8FjtGDTE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEfGuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLHQ/7BOBciE1Q6bpa5QKxiepmQeTb/XwzCX5+CnnIAUFaMafHB5B+\r\ni0BcvogZET/tLuKHcM9CvBxzwJ3Hjm2A229e0N51PbdXMeXP0rUyRGX0pYR+\r\nWaAxrEZ1aNu8j+eqXCuR66oiUJOoAXOZwsN+c2uE6xRg7buv8IVRfstT0YQh\r\ngqsDY9EAss0abAtlwy7tKymXOF/X8MJciaqRjIEUyxDDBypRIr20lOow7fwi\r\nxVJ5zwQnXyZZjr24tlO6FRnKPXE3XP6Fcz6+IT7wru2wPZcaUb5Cxu4aeZvA\r\nyPZEzuxePAQL+Nbx+OhXRCi0MGzpPxxIZMHqYFfUQTRxae9BcJjUp/68hH0v\r\nrlonnz9QwkWgcqC3faCf5YXPfw5blmkXsXqYccSyrsO4lWruf9nBc9bphCwb\r\nG1a+BYHPK/FOLppf1PPDRGdIAm1fDqKE+G9Ok4EgJoGBNYPG4wOQ3xNCZngR\r\nouvBGm2/8TpOhAcVEZflRZR18rWCI3vFlj9pgp5L2tDn+aG2LHlNUhmqX7TT\r\nO3RRqgyeQbpC4Z1XZE/0TyRhL+BEbkgxT7+3YTDCHUyM5isRr9A0ZAAI888E\r\nIwhKZLX47BLn3nP/J97+1R5TFfm/+1d6Z/gjLyQZ8jBmdnsgGwPfOxMynIp6\r\nwgx/As/f9m2QRACx0F3DZoeCLxlsmBw931w=\r\n=ifMs\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/stream-gallery_1.2303151529.0_1678897582358_0.47288167803999936"},"_hasShrinkwrap":false},"1.2303151621.0":{"name":"@bentoproject/stream-gallery","version":"1.2303151621.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2303151621.0"},"gitHead":"d02f1bef730eec6d78d3f2fa5968ca88a60acf17","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2303151621.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-Ixn9/zq6/iMxW1wwuuwWtU686As4Yt+I6aXHhZpZdqBSfWe6qk2q3WSUlDDYcfpq3IbK/HIGMp0IZFTa16pFKA==","shasum":"a9f0cfc79f6c7acaa0dbb4d754a2b93d5bdad2a6","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2303151621.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUdMi2ah6Q/SdHPe5qz0lHgrkYtvqAoFUfOfHlYeobrAiEA7si9C175trt/GAhpQd4pJm+Ld/TmDMPO6PAE4WbRNew="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGrtCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLiQ//e0unWH5NX73Nq5XZWGh5AF5kRedZVO6Q6iaAAOKU0W3oLhSL\r\n+/aM08aOTDeSlxFyYeas79KLOJb9ctjntto0bujxOn7+Czjcs/zL1TjAqx4p\r\nq5wzuP5jTpqu8clN7ugDOrxjFtGNPJ7uEdJJvztK+Da2cObkVEz0Sx31EDoq\r\n10kDDIYaA822e+tcWs24LoudHSifs4jaiLWPy+OQn2lKETvzF62orczIcoQu\r\nTTakyClkjXPJoWLUtHwiI4Q5m/BU56vLl5xLW7Lyzz9bE+u6qjJGEhKA6MIq\r\nAXU0dkmxGROx3+a2/3Sew0krphyCsBTg5gnEiI32P2Cw+kbqNDfiEwu0bv7K\r\nGLQbwBurCxoINEpl9WtpRLbeS3rXzfIN6fcK60hHd4vxdYUNtWFArDOxd9iI\r\nQj8W8wffP+Vnbg4K1xnegngHue0AsC87pCxx6LJUpczx+xasICbsMYmDofYd\r\n3hzJXu8GhMKUoSwkpZUIjRm4otj7lztYo4n/3AhlWiZ0dswhZoSTlg4uIhO+\r\n1iPtcKg8Jpk3naLGEad07Gy4skffOZWtsQTY+3Mej2q8hvhPW6dOMcWYy97e\r\n7KaQS0rIITwI/nqlQ+KHZ6MXveLe5gVgM6nuCrASRIlvB+OQS0JfQ2rOZGdS\r\nTk1luP64Ug0kPl5gmuc59rwd1U2ArzY8Iwk=\r\n=nA12\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/stream-gallery_1.2303151621.0_1679473474347_0.8451833159105109"},"_hasShrinkwrap":false},"1.2303231800.0":{"name":"@bentoproject/stream-gallery","version":"1.2303231800.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2303231800.0"},"gitHead":"bb614003484012cda74511a460e3958f01512a79","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2303231800.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-0v2KtgKoVrCa7UizgaEIGgiALXB62Xvv7V1y7jcjqi975o/QOjeCVmfC35AKvOc6twTvX1UufSFjgELaE3Y3AQ==","shasum":"e04f67eda335c8103d3636620e2694fba2eff73a","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2303231800.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtUvAm1st16rYFsai2qQknpQQ3yFmhsoK9FSj4p4htFAIgAo0U/jNwxfWgUKMhfq+z5P2yaKLOb5LAu5kF4Vx2h0M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJAsqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7VA//Qi2/2XCMAScN6L/uisasnyAF9/r8YhwPDoJ0+djjGMIGlqWb\r\nZn41v/5kkO9S3E4Ck2qa6N1TZcapOzx8zZWD3EfzFqAcd0Rpak6+aJRLF++B\r\n0vpQuTIy+gD1mEz16j/kX0pcLfLUCCFD+/1jH62i1NZIkVx/Gb7Ke8aVV/Xg\r\nR4kk+O4pBbte+CV9oCjg8gJUybwRmL0b3eb0BegSPi/Y7kVRi9eGgHv22Cyp\r\nUlZOoLaSnjTr7iErVwXfs8WOiadXmDd3H1o0YIhOJAutj/RxVC3G0nmbeU4A\r\nuFlOfMIF/vqUJSsF1Kx88pY/L9vYKTpmAVERxJjCjWIe+qMC+NTrWIO9K4oq\r\nA3JxO1ecqjYTfVHP7Npkgg0H4fcUSF6cKIrR3ewDFE4o2oqpF6BPJrDs2TVy\r\n/w4xILTFFZX8/jqP0T5AVWlZse2wBUqL5w0nlvXM98mb+ZC/gWBHdvYhcRFy\r\nWli+UiIcTGUm+xZ2hSZOUfiqvgCZ/T/rRQFxsV9TY4ZMevlj93fd6DKq/wJC\r\n29S3mXk21+gztWEmYrhrtbgxSi6vnRKAnEs+R3mJHBWs3tozd6d8Genw8whn\r\nDgFo1gvv63FPDzL97Sv5Jdk2cXHM0pKi3v+cwOaVRkU9edBhA/UyUoYBP56+\r\nt6cw9kPihfbGDY3aKJRjm8RgLrqK9HPv3aw=\r\n=QwXa\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/stream-gallery_1.2303231800.0_1680083754537_0.09178189861639274"},"_hasShrinkwrap":false},"1.2304040531.0":{"name":"@bentoproject/stream-gallery","version":"1.2304040531.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304040531.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"201864e5a81ca3bd8ba23d3a14d9ac4f88d7a66d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2304040531.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-aUtfKLNpANIM0RKq/gWdd3IV0hqLT/poWZ+Z73L0UiNSJDRp75a7Cp7cakaya8Ajd3RCq+DomERoFeWDMVrvzg==","shasum":"6fef5120918698f69fe0f3a38a8fb480b48997f2","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2304040531.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAXnXengLVS0D8A+NG+GcWAEbDGE/d6R17NJDn5AW/DAiB0tLgjs+dl17fs0TPJuqz8EhpzO+PYeRUw9NoBBBiI9Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkK97lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphnw/+Nd/jjTBCRxFhXLavogHbhZs8fdHLFIW9170lFqT/BcOcVyP1\r\nYcj8KPYohemS0L7Tv2iS1Kqvsntv+VU9P+lo03SifxYLHR0dSZbifzr3Kr8b\r\n5fdZ9DDLRgIULAdiLmIk1QUtHE6zKUbd9zgaMV4H+xArhfMYxhJSwfOyVLiV\r\nbc8QVGpa1hxR5tTiWD6ORaJowNWZ9JHJpu9DrdObcRy+Gbs23er1kv91kC3h\r\n10zNCHNrDQZuLquOk/zjXKH44Dnb7WDSSR0USPEk9rZKubiUuNnQXeMMUUmT\r\nVElDniK3i+78xP2eS//LodUa9Q3iJFa+OGI+D/xV0gh4rfwGVTwKALK+xt1f\r\nnlkaj1SQNG6uEMCYhCcKKrDuU89frYFxSmznBYK/BtpU2kEXZO26Xk1bo2Dq\r\nHDjPY9DIr4MZe4L/vkzaNr2Ut5hTM/42iDQj90oESbFj3ITCncgB2LH+O1uu\r\nLRew0QOh2tNkSB8tmTjasW2Xg0GVfCc7Vs+AX35/9QxshnPs/ucBi6+iUau8\r\nRDXibiN1JCq2hJchPSkhI5SjfKm0iK8tKs8H4ApsRfIGzu5S/a5jbzVUGwh8\r\n6aDWjDwaLjW8Pn6W+se7NA3nPYnvzgc5IV9ocsswdgPi/NOogE8GMpEuryRP\r\npmrjRbUzgF7RKYR8gpdqyfagnWAyT3tfeSo=\r\n=Jsl6\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/stream-gallery_1.2304040531.0_1680596709522_0.8541537137521187"},"_hasShrinkwrap":false},"1.2304062309.0":{"name":"@bentoproject/stream-gallery","version":"1.2304062309.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304062309.0"},"gitHead":"988ca302278a65b8d468409a444b029bc633cd01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2304062309.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-fOmTtKPzH4HakQaGX9uqu1CuWDD3dhaZPkhWLXt++jTROioP9iEtiGGqJ/QMthXf1jZYmHRaqOrE5K5Ik6CfEg==","shasum":"b7fb8325f7857c119c54223c1ce6084eb33a1578","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2304062309.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3Ptcmg7ApkeLS40nxFHJsRF3k429SzzoVP4DWVS4/rAiEA7s6c5MtVNlf4S2vPjL/8lzU8XAS0YoG7J21y4cFEN9k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL9MyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxjA//bEqXH7WqiDmvUsFVwk/uQLR0hZNMx/9NXr+Xb7iDFyP9ceKs\r\nYN0tcfzI1MnCDvwGlWCu3cf6EcNkAfDL8wN/IBQ6Xhp8QydUW0Gg+GZqdTfB\r\ntYtguexqpJZ8CTQJlbnnJIH0Cil3JslslNxzEzUm5Z1ly0SWJyvN7wH1aNGV\r\n62L3sPrHgPPSbvFKzvlFoBKdv8qaY7/omR0F2SjRWSrjT2xyLt29DpMAz4ib\r\n2eZptNqIlA0KSjYLxNBOGlVV09tWhx9GFtP6ZI+w2IQXBahoXOK9oSXw4HUF\r\nm3NCIJBfDE0TWLqbCfJ4NG9Zkc+CsMOpPeaAS7d9zK4lV6G/s6LSFHXkUZq+\r\nBOlb59WNJuoCMVPa5S/OaHJ2vPMuMx18sOtZ9FhPGUIQeslCKR1rHTDS/HZg\r\nElphfnIE2aZjW6bNkkNGyghmXjdWfKn2AjRuMAoXQUHChzFLn4O4eoYccdOC\r\ntv7Gm5jZCaoF1WenwOCDdGEylXLK20TLgORPm4rDn94l01ap2ZZNKQIbHich\r\n7Bxq2gb2xCTE9sSKq8JZjsN7APWINFUb7M76o89rVJ7wJMOgb0RZZMlaKG+d\r\nfMouDg7/P4Uy/3G5bi23HndXtFsDmVgI1GtINpWZqNzBz//jJzHDodFgioGD\r\nkSXI4XArKb/CZ13DlNdPtnF0rE/lCkjVWm8=\r\n=+I0a\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/stream-gallery_1.2304062309.0_1680855857763_0.6858210338714867"},"_hasShrinkwrap":false},"1.2304122229.0":{"name":"@bentoproject/stream-gallery","version":"1.2304122229.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304122229.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"a622b88bef291701e9f95f448f46d014e6e12d5b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2304122229.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-6sw91gd0FnvJIyFE6Vc5YyPCdYrnAjWFqIICa+Ne+H8W905WuZkmhavmxctH2Nu6m3kLG/xmEti9HH8h8kV3QA==","shasum":"88dd966bbd0379da1e469006db76b6b5c66baa1f","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2304122229.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHve5RE2kX+/NHzmKiNiqMSiVRdBdOxEHaVzXSx6kYaUAiEAsZTtmxSC64J5HQVJ/lJaSfz91Jgl5kmo5L5dXftxreE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkN7x3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/sg//bUHloaCrOCRazPw3DKN/CKFSVB3UO719SluMrKil6LKbbKfy\r\nGClZ6/nolK7iqsZOapRvwgthKbqecP3JDnndYwv7b2c3rS9Tn0yGDmt3tQTS\r\nYJ8MFbeTtDV82rEgKJ8fzCRmziF5S2XXRaLjVLoEu6whDNoUoI0f1u+d01x3\r\nu0weWIe1d/DjzredzQUGJ/or7vIoqYz6O37CLT9GLAiQBLwcC2fYMYJdx+xd\r\nWmxiSYop5qwaBvJgJuMqAA/NsQ+4mh8pZNPSJ6nlEb2xWtpo9B8SpFcFxZSl\r\nlpA3dng5xQHK/MHS8CctQYxmXRpSk2Do+pbep0RbEMqsbHR1BzkTy2XmoZA+\r\n1JSHNvTUeH72nSWK5tww/NYbaWaUz02iwEJ3N/48rk9ZwMhOysuU5e1kjyap\r\nVBkAWwMDi0XNBRyyolTJbI7Pt4JrpLrpoQ8C9w4WykWQZItSOhQPDmIpW3Ru\r\nLWpo362vA+2QGXoUvCu1da2Sc5v++FrRIeyXp9nuMlsNCAwroa+kr18FNUrj\r\nZb/oFHUzmKVoAKxLuEyQIQHmTa9TwJ8QAul2RN64aCr7SLEMNbneSskLn+r3\r\nyu1Cw6u/bSe33VJlZUVpVe4aovjsPnfTGGdZ/pNA9V3cV/d6VPSBiWC9IrHf\r\nPNiBK+Isy43xyGSyGxEYcEkivT26gFjnVPQ=\r\n=vEin\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/stream-gallery_1.2304122229.0_1681374327050_0.19844154330146502"},"_hasShrinkwrap":false},"1.2304132133.0":{"name":"@bentoproject/stream-gallery","version":"1.2304132133.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304132133.0"},"gitHead":"453223019920559443567aa4d698b7ca016b28d7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2304132133.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-dH5Z7uYH0OROtBxMldOkbpP4C5BL68ju0fOX9wJpPArc191bdpDzgwulUET/QLCgMTCqqxzBHAf+UgvlXVlFlA==","shasum":"c52a0d4ae4ff34a4831008a4475867475643610e","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2304132133.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzV4SUJXhPhCdUgwH2vxae+PbqkftKM68bnrJdNlTvmAIhAIXfb1oHBxwUaqeSaB2ji8rFqWJO2kqmnDKY0gthhhP5"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOQ3zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPhg//e9CB73MeWWs0IgfXqBP0ei7HX9hOf+AcWGhGSrLygYOqXPHu\r\nUBS8XhVM6ThDAXUMlRwf9zUze7A+J9zm+RAEvwhyVjpSorkczV3Pfkm8xU9N\r\ne/prpwwVju45dMSGZD9ASCEB548Kg8Sk8SmO90lUITMTmArZyuifJtuVj92Y\r\nJfVvFJhGfBexaZ3wED4Z3F6IsH/IqAnM1IPI3MBxkOxqdGq99mDvX5Gudzgy\r\ntrQmL7DtfEDqZeult2YFqsOQ7+xW8xHyJgG8PAIMGXIr+nS4z+2BSYz+7Ihe\r\nOUVjhiTPI7WmhVoD8j1n1z5WsqEsXNtVSG7TzkfbHArobq8pDpCLne5i5tVD\r\nz7/kIdBYUr8aSSl91vfAWQKNJH3ufJAZcxs1PSs1GS1TnH1DdTcOeiKAkwgR\r\n78htz8CtbNwCZflA3CgDHdRmG/wdKfDrTi9EW7LUlpgjHhmFc4wPmrMJfROT\r\nCP6SeDxTAMef5M/NS+HjbAwEoH6P6MzRsaMSd4o8aKWNrPupmAnRvaxONn/u\r\nq7+QUw1MIHAn9ALft8uMXrjXb69H0siQaMBPuYvF97HL/sgE17mm6Pq8EBCR\r\nTVCsuZ8IOl+JURHL27DGWHQbzVp6Rt0vf8y5LPLqa0RM6oySiT+lHkdPE+P6\r\nEhU2Rv3ApnKdqvfV8/NGyO/6A3dwwRLqC/4=\r\n=HfIk\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/stream-gallery_1.2304132133.0_1681460722911_0.5973015605110878"},"_hasShrinkwrap":false},"1.2304212144.0":{"name":"@bentoproject/stream-gallery","version":"1.2304212144.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304212144.0"},"gitHead":"74060fa076cb05cd0859ed848acd32302f1e46dc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2304212144.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-4WGjNUIu675Ixuwak3+E4ALvameYM4K6rx8DOeZVGEfinH07Q+fI9qDnmZS5Hcr1/gpCthGMMelF0KlViQeltA==","shasum":"47004a59f184fb4b2f5265fb7a7099cca94ee90d","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2304212144.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCZw+WYIpvGi2YCJF5qgMrh+4lVIkwZGIIvzU0wt2oKnQIfP69TjCWkyDwkbq7/tYS2HHswApIYQfnc5XoGcVewnw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQ5o2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqqog/+J6ItbfkjG3DjBSwJi59yEzs3iPiYqtgBA3Aw2BxHJfpp9ipG\r\nr9dnVhT86iiSCAQbyRSXBEeSQPrksMOL4Yw2fhbJUbqJCrD2QEOWqOhGny3E\r\nPADVgrISIPIeq0PWj8cBSkIeRgVlINMzhr9TnTOxiNAQ+3zecuDxjKYDqv+F\r\n0S+uAheB299dU3FnRGvANuBi6r3MCRzfZR1UkeNwZhU/1ZmouLr5FHGB2Pec\r\nSFQ1nZ6y0aM0zMhdVDC4Nd10mIAk4GqNKnUG7T0cVhThh9INbkgE280ZDOdJ\r\nwQSbnlbuKTWdP2GtU3xzI/dBynCNfarVpRn20YPhS4rf9hQ6yZBbhxMHInKR\r\nmJv4IKmxWs68D0HlRRd8OzECTqYpovXh6xOEzVSMmdrlKn6LA5I1RruYtUjs\r\nK58uGiT2ycluGJ3xVrl2P4XeMRwtu30tBk6n4IeeL4QIbMGESSS6yfi7FOrC\r\njvlMB6lVdZ+uNTa7UExH9PJBXWRP12FzxPJrxRdaMevRSG5afQbga/IkGnle\r\nlrnXvJFrrDRRimdUDARxTDmCK9lqeO7Rkel3R/W8/cdf3QYfzXkTa2TbD/sk\r\nJEKyiybWFBKbrVHiiQxHSC6Cm0o3ocAsg0r+zbiPoTTD2OGzzK90UGnIBfrs\r\nL9wMWlhLxru8Md9jwjV/zbsDEI7FFsO2pjQ=\r\n=2C9+\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/stream-gallery_1.2304212144.0_1682151989822_0.7038480943731087"},"_hasShrinkwrap":false},"1.2304241924.0":{"name":"@bentoproject/stream-gallery","version":"1.2304241924.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304241924.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"f962c0db0e4934715d4bbce41c2220e6cc8bc1ec","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2304241924.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-IXbkztMGlo/7mey0GVQfApzgOr4uE3YqMTN+iu1wr8UqtkKHgPmejLx+KbNNEbvl8NcJBw/j8PVg2NtxZqCWdQ==","shasum":"fbcef0cadb086ecccd578bfb8ad69eda583da271","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2304241924.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICI0L+5/CkSqGnYB4dlRL9vtJVAztIxo6NFrYemwCdGeAiEAtIiifWRwpX2ustg/Dd279XmmLCNvCOcU5d1aA4qT4FE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkR46nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWtBAAoUZ25LD9JijNFudsqJUM7v65IXzgIe1V8swECc6K/bXfRGhO\r\nlj2kuydr0cbUe6iRMOMgeMrBMbrFrWC4FygQ99aRJyoEtQDo7gLbNZzZPYXN\r\n7WX96Ba7U74DXMto5BlUBtR5s4Rg/1mmDqRtbdmLhHjohFzeFx1B3pFrj4mQ\r\nCkC1vvr1AUgQC78z7lwat8cC9G3V6HReBvz36aupsw7E36U2B10hNaVU2HEi\r\nnNw07dYQLR37g6SQU9IDG44zUcksb+SswnhNmfSPLo0oURgFuhIFhmWgM+MI\r\n2Emupeo4H+iSdxmNb911eCJu7eMrxA6NpgpdJ934WL/4pNW1LjCNxlsGmRIJ\r\nzKMrvHqOnLbr1ODbqPomGOzee9KYH4tzuaU+VW/KGCsVP6cIgGmFX2RDxKjv\r\nR0fe+/+z7NFsW+o7mVvwM8HjS0zenyBtkJB3WPVwE0S2wfrPf37lw9JctkjT\r\ne1+XXGr/X2ansDh83ckB1BnNUzksnR8QZEvpdt2FvF3LSzpdEPC8+U+pSHqj\r\n7Fv3SwGECnEVb2YlJArm6cu3joYcfcukuYaaEx0ZfFwuLF7crzpP9D1ewm2Q\r\nVtXij831Sbmukcu6zU532SBDKoqj+5q9Zi4hPK+V0SVaHJmoVfYavdawVF7g\r\nSMykdjKmN8BSSxcx/uRW2MWXelzNLpUeoHo=\r\n=20iG\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/stream-gallery_1.2304241924.0_1682411174739_0.6380029965727931"},"_hasShrinkwrap":false},"1.2304262219.0":{"name":"@bentoproject/stream-gallery","version":"1.2304262219.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304262219.0"},"gitHead":"1e6e00ef42b6ca33dcb23d56bce6506f0b5b81b2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2304262219.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-+feIYvRtyANmQA+fNAMGC4Zrxa7MXBSqCKdCjYTmbjrqpkGJYVhZYT50YsAqh3hyr+VtW1qp8QhEQb/tPG0jJA==","shasum":"faa3a5c95b066b43357f697fb6e53a224503871d","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2304262219.0.tgz","fileCount":31,"unpackedSize":1703432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/nfhCi2rnSvVcsjxEioW4GRZHS9Tz0hDQ4sLUAFdEcAIgHJk0m3pMrq9rAEXdiShz6UO1DwsqTvbRu4WNBjfu17A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSjHuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjkA/9GmEtTcCeIQexFL7peYveC/irZEAu9/GMu5+Vx5vmXF0TvIev\r\nvLo0FkShVpAUYQHDk5EJU+VRG8v1wR0XPj0ydoMm54+wSW2MZVM2uPoiMbO1\r\n+27kjVoDvYNizyB1DZPcNtOpbfRKyqu0XyKrrLLWTsOsjTE9bY8hEgri++2W\r\njBeqFMdQmpsBAPnNsjJ6FzkRFAhZb7lBm2WtDDjT6SgDPa92Avx2FDFaBl2d\r\n+L9Yqcsc91NrOCbaUyj/IiGk34Nu8I0m/bsgy1Mx2moz46KNBY2piV6u+vq2\r\nJud7Uj194mOF7yxpR4bkrKCUHQqPc3M9iSMseXnn5tZae4XBzd7pAe4HNR9U\r\nlZwCpZh38R0GDLjusUj1IcDr/M4AlNWMWTkKjtl93liDRli7Kq9BDTD4oLEf\r\nObfY29wXjmvhZKYGxRRYtzVCZBfwCzH6rqHHWIDYBxxjcTAeuj51wdy1CAT6\r\nrPkyW/2blNcxhJEWmC7ieGLQAYUM0jlvG0Hyv88fxspDj223TAJnaU0wrtau\r\n82TPDzlsrRYph5fOy5SvexQh7igNY884/IM8RzF0l2MPNzqevqKjkxsH/9et\r\nOFRFXljbqS6wBONUVqvH6erfSD8SamUEb4IDcTQHC+f03UQqsVxH+pSH12x0\r\nHmpnDVxDo8GntrjuubuNuRd/WwEsSwUdGRo=\r\n=D8/T\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/stream-gallery_1.2304262219.0_1682584046379_0.6866441440674851"},"_hasShrinkwrap":false},"1.2305022024.0":{"name":"@bentoproject/stream-gallery","version":"1.2305022024.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305022024.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"275d6cbfacfdba2a626c1c3d191df16325439dc2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2305022024.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-13LgIIrkeQNDbUw6OQVFgpbqjYl/RQxRV4wjPR+K9ltA1fUS9cn8iQxpfRRCJG1uEVJUjVH5sNRRxmJyU9Bcvw==","shasum":"c68bff8e77bdbf66af071929f785a0401aa38659","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2305022024.0.tgz","fileCount":31,"unpackedSize":1721435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa1rDFRz+sQ8w6Fj/TAzZAHCXwGbseqNE8s9Og9lPxhAIgVniGP3IVjlBsX4rZqcEez7syUeY2+y4VY6C5kdqDP7I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUhrQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotMxAAgWOmC9uNqL8EH+stRY4tmEHr8DTSt2s5jgBElZilY3DMC6Bl\r\nZDvwvsOYee9xQzPjcTZt/Zv+R+jL8MfQJASmBYYSMAx//ceLs2V+1KiYsa4D\r\nZaRgewYC4KvdiwpcoyEX9UUTsD21mVPqC3VBYKcertIR3OpcNm2sYbVzFqKf\r\nb/hRiR4sVWEp1cACbOLHzhlWJrSKXHZ0YzPbjCiNnAOKuuB1oq4qr1hHmGrL\r\nlnsjRW1neWBUber4VBQq9PhrDjVf5dGGWhKrxPZocmyMMYH8yzzCIvZx6XeS\r\nUFVoeD0YGMkDnTM1B/hHbVDR52k7qHESqMw0kaJXa5kvpuqfd1bZ53I5y0Cg\r\n3j+gpjwQ5Q8YRX6fdaoGZ34v94NV6mKkhv4ARhwOAbljQf91fM66cUXzizEp\r\nEUsJQuUxbSIOvmSU9LIIgjsALHp82BQCpYvkkZtNv6k9YR3LBDJVytEQKrCR\r\nYGS/78zCCrHBwM/Apy3LvSW/NqHIh5DFnzw1W4bJMQIbcGPQYzGaKfdX+RVJ\r\nVD2Ew/6oFMnZ5gPZgtk7q6W+pb2SlVNS8EPbO2baQ/qsMK4/IKhWNU/HNevY\r\njFTZNNYqBHEm6Z293nHgHfjFiamqRewEQku6CluGIrnWzG79m4cYj5IKmeTz\r\naUszRuYSfdnc113b+XgyrfWO3kUgoGC9JO8=\r\n=xnZf\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/stream-gallery_1.2305022024.0_1683102416485_0.4109690516412856"},"_hasShrinkwrap":false},"1.2305051745.0":{"name":"@bentoproject/stream-gallery","version":"1.2305051745.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305051745.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"a6aa8f04998e5f74539b892e6fde8143851f1ef6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2305051745.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-Pk+UjGmzVrZrue1P3kr35yrJFMRI3PefKMq3WABAEKl7HGbfiSmTJhiFw9mgp/DilQQdlExBcUxVSgl/Uy4rhw==","shasum":"1c887d23c9e7944ddc188b87b00efb0d73974b3c","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2305051745.0.tgz","fileCount":31,"unpackedSize":1721435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJeKEYTx7amBkqXxOGOZss7JbpNR0vY7GrCce+j4T5oAiAMZwq7zr5bjwxmhHwkPrwquCKpcJKVlVi/v+fzvAiFIg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2305051745.0_1683361502060_0.3608439880896277"},"_hasShrinkwrap":false},"1.2305152039.0":{"name":"@bentoproject/stream-gallery","version":"1.2305152039.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305152039.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"4130d5e4016e588172d11ef0a84dea019bf08e0f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2305152039.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-LFNFiS89fB4BSxEVG49tRL6noLyyrS5+yUErFKCKq9iyZeYrgaJUHl4oLyZ+/mN8S0o94DdG0nxX4zK9eGptgQ==","shasum":"d4e55d0daa10a5bbc5bd60db0d26ba8e93dd2ba6","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2305152039.0.tgz","fileCount":31,"unpackedSize":1721435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfkXMYWW7m1rEGhl81VpN6Zhx4rrugGvaGihaPekheMAIhAPtn2kIFO/VXzWPxJl6/WY0zWoZHLqX8n8cKuoukt+5l"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2305152039.0_1684225601074_0.14384422308070777"},"_hasShrinkwrap":false},"1.2305182038.0":{"name":"@bentoproject/stream-gallery","version":"1.2305182038.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305182038.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"885f40954f2783f7451ec4e195b909ce170466fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2305182038.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-I2NzMrdHxE59toAKo+LBlA4ieSZkg2JcA4MxcMzS9BRbH6tiEQ2cy8PtfD1Q21h39F7KfOXK+bNrr7Xgm4ZQwQ==","shasum":"15a21ff5fe38afa2e7962c1f17948988ef26b349","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2305182038.0.tgz","fileCount":31,"unpackedSize":1721435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwEX40Aok5eItqe9BHLSYlSx45uQQn9JNI1a14xKKuLAiBNpnmWcmapCWH7xwSjOQmmXpjBIEVXWjuJuv3exPResA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2305182038.0_1684484851580_0.7996668069593016"},"_hasShrinkwrap":false},"1.2305221508.0":{"name":"@bentoproject/stream-gallery","version":"1.2305221508.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305221508.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"f6a823a49114a57cdbf351ab983baaf0bdf4bd1d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2305221508.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-zZCdwVOgrQDn2HXejuqOPeezojGCoRX2hjocHCr+4yyyURX2XA+9uw8Lb+Eyocgje76xuN4xxXdO1sKFPedBYw==","shasum":"d0d07456a2879628478bbabc9a4679e82d2fddbb","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2305221508.0.tgz","fileCount":31,"unpackedSize":1721435,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTkeVbLxdmFXY43Xq9lTpvHid58TCafqv+NP7WasmwXgIhAIMcrS04CEs+g4Nj6iC7Ff1gWVWMyOOPUqLpTfpOD12N"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2305221508.0_1684830337488_0.5946365328263634"},"_hasShrinkwrap":false},"1.2305051745.1":{"name":"@bentoproject/stream-gallery","version":"1.2305051745.1","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305051745.1"},"gitHead":"c7c16e5e6f51fa01e6e31b5edddf60feacb1ebb1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2305051745.1","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-CmwBUs53Etq+ftnYV9FKDnhufAiDmROVH/SQkwcAtf5rcnWZQ5welZzXyWShWxGKKV6Gm1eCxNfP8MHliXUiyg==","shasum":"ef2af24bf62866d6f57dc302370f21147aabbb5b","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2305051745.1.tgz","fileCount":31,"unpackedSize":1721363,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8PvujPxQbe8MdTH5YYiHZPe760PmpWKhOic0fe3ZWXgIgP+AgJkqUO+RHiymewZLg4g24+7v6qu2FsLqMuZ5QT8w="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2305051745.1_1684883013411_0.2657820930599848"},"_hasShrinkwrap":false},"1.2305232041.0":{"name":"@bentoproject/stream-gallery","version":"1.2305232041.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305232041.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"c7c16e5e6f51fa01e6e31b5edddf60feacb1ebb1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2305232041.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-maNuAfX2HjRklDa5xPTot4e1rl+a8fvI+NuZHGhkRy+SIvw40jiBSvpwKOPMF6pXz9Ki1PTOasxI/65ZOy1CiQ==","shasum":"8e380b22895a2e28e61a81eefef9a84d978b6ab9","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2305232041.0.tgz","fileCount":31,"unpackedSize":1721363,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAeZwT/arl6YwE5bPzu3y60AQzv25tZQgYexAr7O2G8RAiEA7RrtL+CaWNK3pIX7Kt04K26V4y4fz7c/fmCYx2a2eUs="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2305232041.0_1684916829313_0.5714876380379612"},"_hasShrinkwrap":false},"1.2305241828.0":{"name":"@bentoproject/stream-gallery","version":"1.2305241828.0","description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.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-stream-gallery/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305241828.0"},"readme":"# Bento Stream Gallery\n\nThe Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.\n\nIt is a specialization of Bento Base Carousel and uses [ResizeObservers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to adjust dynamically adjust the size and number of displayed slides displayed based on the width of the container. To implement a more customized UX, see [``](../../amp-base-carousel/1.0/README.md).\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-gallery';\ndefineBentoStreamGallery();\n```\n\n### Include 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
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `bento-stream-gallery` component API is accessible by including the following script tag in your document:\n\n```javascript\nawait customElements.whenDefined('bento-stream-gallery');\nconst api = await streamGallery.getApi();\n```\n\n#### Actions\n\n##### next()\n\nMoves the carousel forwards by number of slides visible.\n\n```js\napi.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by number of slides visible.\n\n```js\napi.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument.\n\nNote: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```js\napi.goToSlide(0); // Advance to first slide.\napi.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\nThe Bento Stream Gallery component allows you to register and respond to the following events:\n\n##### slideChange\n\nThis event is triggered when the index displayed by the carousel has changed. The new index is available via `event.data.index`.\n\n```js\nstreamGallery.addEventListener('slideChange', (e) => console.log(e.data.index));\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\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n\n```\n\n#### API Example\n\nThis example demonstrates how to programmatically switch to the next/previous slide and jump to specific slides.\n\n\n\n```html\n\n\n \n \n \n \n \n \n \n \n \n
A
\n
B
\n
C
\n
D
\n
E
\n
F
\n
G
\n \n \n \n\n```\n\n### Attributes\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extra-space`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outset-arrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `min-visible-count`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `max-visible-count`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `min-item-width`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `max-item-width`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slide-align`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n\n### Styling\n\nYou may use the `bento-stream-gallery` element selector to style the streamGallery freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/stream-gallery\n```\n\n```javascript\nimport React from 'react';\nimport {BentoStreamGallery} from '@bentoproject/stream-gallery/react';\nimport '@bentoproject/stream-gallery/styles.css';\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n### Interactivity and API usage\n\nBento components are highly interactive through their API. The `BentoStreamGallery` component API is accessible by passing a `ref`:\n\n```javascript\nimport React, {createRef} from 'react';\nconst ref = createRef();\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n```\n\n#### Actions\n\nThe `BentoStreamGallery` API allows you to perform the following actions:\n\n##### next()\n\nMoves the carousel forwards by `advanceCount` slides.\n\n```javascript\nref.current.next();\n```\n\n##### prev()\n\nMoves the carousel backwards by `advanceCount` slides.\n\n```javascript\nref.current.prev();\n```\n\n##### goToSlide(index: number)\n\nMoves the carousel to the slide specified by the `index` argument. Note: `index` will be normalized to a number greater than or equal to `0` and less than the number of slides given.\n\n```javascript\nref.current.goToSlide(0); // Advance to first slide.\nref.current.goToSlide(length - 1); // Advance to last slide.\n```\n\n#### Events\n\n##### onSlideChange\n\nThis event is triggered when the index displayed by the carousel has changed.\n\n```jsx\n console.log(index)}>\n \n \n \n\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoStreamGallery` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with `width`). These can be applied inline:\n\n```jsx\n...\n```\n\nOr via `className`:\n\n```jsx\n...\n```\n\n```css\n.custom-styles {\n background-color: red;\n}\n```\n\n### Props\n\n#### Common props\n\nThis component supports the [common props](../../../docs/spec/bento-common-props.md) for React and Preact components.\n\n#### Behavior\n\n##### `controls`\n\nEither `\"always\"`, `\"auto\"`, or `\"never\"`, defaults to `\"auto\"`. This determines if and when prev/next navigational arrows are displayed. Note: When `outset-arrows` is `true`, the arrows are shown `\"always\"`.\n\n- `always`: Arrows are always displayed.\n- `auto`: Arrows are displayed when the carousel has most recently received interaction via mouse, and not displayed when the carousel has most recently received interaction via touch. On first load for touch devices, arrows are displayed until first interaction.\n- `never`: Arrows are never displayed.\n\n##### `extraSpace`\n\nEither `\"around\"` or undefined. This determines how extra space is allocated after displaying the calculated number of visible slides in the carousel. If `\"around\"`, white space is evenly distributed around the carousel with `justify-content: center`; otherwise, space is allocated to the right of the carousel for LTR documents and to the left for RTL documents.\n\n##### `loop`\n\nEither `true` or `false`, defaults to `true`. When true, the carousel will allow the user to move from the first item back to the last item and visa versa. There must be at least three slides present for looping to occur.\n\n##### `outsetArrows`\n\nEither `true` or `false`, defaults to `false`. When true, the carousel will display its arrows outset and on either side of the slides. Note that with outset arrows, the slide container will have an effective length of 100px less than the allotted space for its given container - 50px per arrow on either side. When false, the carousel will display its arrows inset and overlayed on top of the left and right edges of the slides.\n\n##### `peek`\n\nA number, defaults to `0`. This determines how much of an additional slide to show (on one or both sides of the current slide) as an affordance to the user indicating the carousel is swipeable.\n\n#### Gallery slide visibility\n\n##### `minVisibleCount`\n\nA number, defaults to `1`. Determines the minimum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `maxVisibleCount`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum number of slides that should be shown at a given time. Fractional values can be used to make part of a(n) additional slide(s) visible.\n\n##### `minItemWidth`\n\nA number, defaults to `1`. Determines the minimum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n##### `maxItemWidth`\n\nA number, defaults to [`Number.MAX_VALUE`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE). Determines the maximum width of each item, used to resolve how many whole items can be shown at once within the overall width of the gallery.\n\n#### Slide snapping\n\n##### `slideAlign`\n\nEither `start` or `center`. When start aligning, the start of a slide (e.g. the left edge, when horizontal aligning) is aligned with the start of a carousel. When center aligning, the center of a slide is aligned with the center of a carousel.\n\n##### `snap`\n\nEither `true` or `false`, defaults to `true`. Determines whether or not the carousel should snap on slides when scrolling.\n","readmeFilename":"README.md","gitHead":"fcd19c6354383946b2d66b95efec56661b06e5b6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/stream-gallery@1.2305241828.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-1dMmsAT0i2Ibjzpl4HVO0Mpg79IWLIcfjKEsKDrn29bKtWF5aCq//l1gw2u4hPwA/r8jwphWnH63RxWoGRbOXg==","shasum":"917de3b80b00e1a61d0497668e76b0919341ab94","tarball":"https://registry.npmjs.org/@bentoproject/stream-gallery/-/stream-gallery-1.2305241828.0.tgz","fileCount":31,"unpackedSize":1721363,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrE/dC+9BVOHpgQbMhf+exBGTGV0ydqNx0vqprhxPdZwIhAJoGPzZ7sPK4XZ+++e3HRhqBVJnnnt8SDXRGmmXxpuOu"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stream-gallery_1.2305241828.0_1685003192336_0.6786111505889938"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-28T18:17:57.007Z","1.2110261518.0":"2021-10-28T18:17:57.302Z","modified":"2023-05-25T08:26:32.706Z","1.2110252343.0":"2021-10-28T21:47:16.396Z","1.2110281959.0":"2021-10-29T11:52:16.423Z","1.2110290545.0":"2021-10-30T11:21:25.654Z","1.2111011823.0":"2021-11-02T11:25:20.379Z","1.2110152252.3":"2021-11-02T22:05:58.767Z","1.2110212130.2":"2021-11-02T22:15:29.712Z","1.2111022043.0":"2021-11-03T11:24:40.557Z","1.2111180040.0":"2021-11-18T21:30:38.643Z","1.2111060251.3":"2021-11-18T21:45:57.757Z","1.2111182332.0":"2021-11-19T12:26:22.383Z","1.2111060251.9":"2021-11-19T16:31:53.979Z","1.2111191951.0":"2021-11-20T12:23:30.999Z","1.2111230244.0":"2021-11-23T12:24:11.572Z","1.2111230636.0":"2021-11-24T12:23:43.569Z","1.2111242025.0":"2021-11-25T12:42:24.570Z","1.2111292120.0":"2021-11-30T12:41:04.073Z","1.2111152338.2":"2021-11-30T17:57:53.463Z","1.2112010058.0":"2021-12-01T12:19:04.264Z","1.2112012300.0":"2021-12-02T12:30:26.927Z","1.2112021656.0":"2021-12-03T12:22:20.078Z","1.2112032204.0":"2021-12-04T12:22:10.020Z","1.2112062322.0":"2021-12-07T12:27:20.314Z","1.2112062322.1":"2021-12-07T21:38:31.389Z","1.2112062322.2":"2021-12-07T22:31:33.006Z","1.2112080230.0":"2021-12-08T13:24:03.186Z","1.2112080230.1":"2021-12-08T16:00:17.810Z","1.2112082232.0":"2021-12-09T12:45:27.290Z","1.2111242025.1":"2021-12-10T00:12:26.171Z","1.2112091956.0":"2021-12-10T12:46:59.197Z","1.2112102136.0":"2021-12-11T12:31:37.357Z","1.2112132331.0":"2021-12-14T12:59:32.773Z","1.2112160003.0":"2021-12-16T12:22:00.763Z","1.2112162055.0":"2021-12-17T12:17:59.717Z","1.2112170012.0":"2021-12-18T12:18:08.155Z","1.2112201724.0":"2021-12-21T12:21:41.227Z","1.2112212349.0":"2021-12-22T12:23:45.426Z","1.2112221739.0":"2021-12-23T12:18:50.402Z","1.2112231523.0":"2021-12-24T12:20:51.747Z","1.2201042109.0":"2022-01-05T12:31:27.709Z","1.2201052144.0":"2022-01-06T12:42:56.722Z","1.2201061922.0":"2022-01-07T12:34:07.065Z","1.2201071715.0":"2022-01-08T12:24:15.872Z","1.2201101902.0":"2022-01-11T12:30:37.728Z","1.2112231523.1":"2022-01-11T19:27:48.670Z","1.2201120015.0":"2022-01-12T12:33:27.173Z","1.2112231523.2":"2022-01-12T22:41:51.437Z","1.2201122239.0":"2022-01-13T13:01:59.906Z","1.2201131702.0":"2022-01-14T13:04:45.862Z","1.2201141909.0":"2022-01-15T12:21:22.125Z","1.2201141909.1":"2022-01-25T19:49:55.673Z","1.2201141909.3":"2022-01-26T20:59:30.158Z","1.2201141909.4":"2022-02-01T21:40:03.682Z","1.2201212122.3":"2022-02-02T18:00:04.985Z","1.2202012258.0":"2022-02-02T19:13:36.606Z","1.2202022130.0":"2022-02-03T16:57:38.954Z","1.2202031816.0":"2022-02-04T15:47:17.471Z","1.2202042210.0":"2022-02-05T09:20:18.451Z","1.2202072236.0":"2022-02-08T09:20:27.273Z","1.2201262038.1":"2022-02-08T21:15:29.215Z","1.2202082004.0":"2022-02-09T22:17:15.155Z","1.2202092050.0":"2022-02-10T17:59:18.594Z","1.2202112230.0":"2022-02-14T21:07:58.014Z","1.2202142035.0":"2022-02-15T09:27:37.668Z","1.2202042210.1":"2022-02-15T18:25:52.324Z","1.2202152253.0":"2022-02-16T09:10:44.139Z","1.2202162256.0":"2022-02-17T09:30:05.711Z","1.2202180255.0":"2022-02-18T09:45:20.315Z","1.2202230359.0":"2022-02-23T09:30:23.655Z","1.2202232232.0":"2022-02-24T15:23:12.806Z","1.2202241911.0":"2022-02-25T15:18:29.802Z","1.2202252101.0":"2022-02-28T16:46:26.143Z","1.2202230359.1":"2022-03-01T22:05:55.169Z","1.2203041950.0":"2022-03-15T18:36:14.693Z","1.2203151539.0":"2022-03-16T08:22:10.457Z","1.2203172113.0":"2022-03-18T08:23:15.943Z","1.2203221937.0":"2022-03-23T08:25:06.174Z","1.2203231914.0":"2022-03-24T08:23:35.447Z","1.2203101844.0":"2022-03-24T20:09:58.303Z","1.2203281422.0":"2022-03-29T08:28:52.729Z","1.2204121632.0":"2022-04-12T18:15:14.603Z","1.2204122000.0":"2022-04-13T08:31:00.647Z","1.2204132005.0":"2022-04-14T08:32:11.421Z","1.2204142048.0":"2022-04-15T08:26:30.590Z","1.2204160405.0":"2022-04-16T08:24:17.399Z","1.2204182206.0":"2022-04-19T08:29:35.072Z","1.2204191429.0":"2022-04-20T08:31:40.582Z","1.2204211736.0":"2022-04-22T08:25:37.208Z","1.2204221712.0":"2022-04-23T08:24:45.682Z","1.2204252045.0":"2022-04-26T08:31:31.021Z","1.2204272205.0":"2022-04-28T08:30:58.295Z","1.2204281949.0":"2022-04-29T08:27:14.463Z","1.2204292129.0":"2022-04-30T08:25:12.931Z","1.2205031420.0":"2022-05-04T08:25:56.874Z","1.2205041533.0":"2022-05-05T08:25:38.254Z","1.2205051832.0":"2022-05-06T08:25:43.062Z","1.2205090810.0":"2022-05-10T08:32:06.552Z","1.2205101904.0":"2022-05-11T08:31:03.912Z","1.2205120110.0":"2022-05-12T08:30:48.136Z","1.2205161914.0":"2022-05-17T08:26:08.376Z","1.2205181800.0":"2022-05-19T08:26:37.561Z","1.2205191749.0":"2022-05-20T08:26:31.306Z","1.2205232225.0":"2022-05-24T08:25:23.719Z","1.2205120110.1":"2022-05-24T19:12:37.901Z","1.2205251942.0":"2022-05-26T08:26:11.883Z","1.2205270638.0":"2022-05-27T08:25:46.091Z","1.2206071918.0":"2022-06-07T22:26:50.904Z","1.2206072228.0":"2022-06-08T08:26:25.696Z","1.2206082301.0":"2022-06-09T08:29:43.587Z","1.2205270638.4":"2022-06-10T21:34:18.162Z","1.2206101637.0":"2022-06-11T08:26:28.775Z","1.2206131450.0":"2022-06-14T08:28:05.508Z","1.2206071918.1":"2022-06-14T21:28:08.280Z","1.2206162023.0":"2022-06-17T08:27:15.430Z","1.2206221455.0":"2022-06-23T08:27:41.361Z","1.2206291614.0":"2022-06-30T16:07:09.553Z","1.2207071723.0":"2022-07-08T08:33:27.669Z","1.2207181727.0":"2022-07-19T08:26:34.959Z","1.2207201724.0":"2022-07-21T08:26:05.227Z","1.2207221643.0":"2022-07-23T08:25:53.955Z","1.2207261725.0":"2022-07-27T08:25:42.333Z","1.2207281718.0":"2022-07-29T08:28:31.429Z","1.2208021808.0":"2022-08-03T08:26:48.845Z","1.2208042017.0":"2022-08-05T08:28:42.405Z","1.2208051912.0":"2022-08-06T08:27:16.594Z","1.2208081650.0":"2022-08-09T08:26:57.496Z","1.2208092047.0":"2022-08-10T08:26:57.757Z","1.2207281718.1":"2022-08-10T16:56:51.040Z","1.2207281718.2":"2022-08-10T18:16:00.876Z","1.2208112015.0":"2022-08-12T08:28:03.902Z","1.2208121708.0":"2022-08-13T08:26:03.254Z","1.2208051912.1":"2022-08-16T23:04:50.770Z","1.2208172101.0":"2022-08-24T20:54:51.436Z","1.2208242209.0":"2022-08-25T08:26:38.477Z","1.2209072154.0":"2022-09-08T08:25:06.183Z","1.2209131909.0":"2022-09-14T08:43:40.757Z","1.2208242209.1":"2022-09-15T16:42:10.016Z","1.2209142312.0":"2022-09-20T22:07:27.506Z","1.2210010655.0":"2022-10-04T16:49:12.256Z","1.2210041838.0":"2022-10-05T08:32:55.198Z","1.2210052034.0":"2022-10-06T08:25:38.581Z","1.2210071758.0":"2022-10-08T08:25:12.814Z","1.2210112333.0":"2022-10-12T08:24:27.725Z","1.2210142102.0":"2022-10-15T08:23:44.302Z","1.2210172057.0":"2022-10-18T08:27:29.475Z","1.2210191347.0":"2022-10-20T08:25:34.203Z","1.2210211855.0":"2022-10-22T08:23:44.636Z","1.2210251605.0":"2022-10-26T08:28:20.783Z","1.2210272257.0":"2022-10-28T08:26:21.146Z","1.2211042305.0":"2022-11-05T08:24:26.062Z","1.2211060024.0":"2022-11-08T08:26:03.184Z","1.2211111611.0":"2022-11-12T08:24:42.643Z","1.2211151402.0":"2022-11-16T18:38:38.776Z","1.2211182146.0":"2022-11-19T08:25:49.074Z","1.2211250451.0":"2022-11-25T08:24:32.760Z","1.2211302304.0":"2022-12-01T08:24:05.437Z","1.2212071834.0":"2022-12-07T19:37:12.244Z","1.2212092023.0":"2022-12-10T08:25:19.601Z","1.2211302304.1":"2022-12-13T21:52:44.327Z","1.2212151632.0":"2022-12-20T15:52:04.885Z","1.2212151632.1":"2022-12-20T20:09:41.377Z","1.2211302304.2":"2022-12-20T22:32:06.465Z","1.2212151632.2":"2023-01-03T18:12:50.491Z","1.2301031703.0":"2023-01-03T20:30:25.869Z","1.2301032153.0":"2023-01-04T08:25:00.160Z","1.2301041800.0":"2023-01-05T08:25:27.650Z","1.2301100345.0":"2023-01-10T08:25:33.416Z","1.2301112346.0":"2023-01-12T08:27:01.088Z","1.2301181928.0":"2023-01-19T08:26:12.922Z","1.2301261900.0":"2023-01-27T08:27:10.259Z","1.2301301810.0":"2023-01-31T08:26:03.416Z","1.2302012254.0":"2023-02-02T08:24:29.250Z","1.2302021743.0":"2023-02-03T08:26:09.837Z","1.2302031721.0":"2023-02-04T08:24:44.717Z","1.2302171719.0":"2023-02-18T08:23:44.577Z","1.2302271541.0":"2023-02-28T17:24:55.752Z","1.2303151529.0":"2023-03-15T16:26:22.610Z","1.2303151621.0":"2023-03-22T08:24:34.637Z","1.2303231800.0":"2023-03-29T09:55:54.756Z","1.2304040531.0":"2023-04-04T08:25:09.867Z","1.2304062309.0":"2023-04-07T08:24:18.128Z","1.2304122229.0":"2023-04-13T08:25:27.340Z","1.2304132133.0":"2023-04-14T08:25:23.158Z","1.2304212144.0":"2023-04-22T08:26:30.094Z","1.2304241924.0":"2023-04-25T08:26:15.043Z","1.2304262219.0":"2023-04-27T08:27:26.682Z","1.2305022024.0":"2023-05-03T08:26:56.711Z","1.2305051745.0":"2023-05-06T08:25:02.414Z","1.2305152039.0":"2023-05-16T08:26:41.300Z","1.2305182038.0":"2023-05-19T08:27:31.919Z","1.2305221508.0":"2023-05-23T08:25:37.785Z","1.2305051745.1":"2023-05-23T23:03:33.681Z","1.2305232041.0":"2023-05-24T08:27:09.583Z","1.2305241828.0":"2023-05-25T08:26:32.578Z"},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"description":"The Bento Stream Gallery is for displaying multiple similar pieces of content at a time along a horizontal axis.","homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-stream-gallery/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-stream-gallery/1.0"},"author":{"name":"Bento Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}