{"_id":"@bentoproject/soundcloud","_rev":"217-64913bc1b3fd03899b09243e0770e87c","name":"@bentoproject/soundcloud","dist-tags":{"nightly":"1.2302271541.0","latest":"1.2302271541.0"},"versions":{"1.2110261518.0":{"name":"@bentoproject/soundcloud","version":"1.2110261518.0","description":"AMP HTML amp-soundcloud 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"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-C74/TfdId9MjsB06ARVoLWg5jMMl8kkWew4NJrbH29oycTVL7GRfX9lXAu8NNmu0eEnGDn0L5UcZnFuqPDiJrw==","shasum":"2f12afbe4c6304015e3bafd8cdb0b49387a71378","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2110261518.0.tgz","fileCount":27,"unpackedSize":1983109,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGJPv9pZEKPAp7MjcTYP0skvhqRSf2rEf9Ioubg2TkAwIhAM9Dksjrp+gxk60NNmvGt+Do2zIrCfcDSw4mZtQ7QdoY"}]},"_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/soundcloud_1.2110261518.0_1635445045027_0.06555324195635936"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/soundcloud","version":"1.2110252343.0","description":"Bento soundcloud 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"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nThe Bento Soundcloud component allows you to embed a Soundcloud clip.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-soundcloud>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-soundcloud {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n  ></script>\n  <style>\n    bento-soundcloud {\n      aspect-ratio: 1;\n    }\n  </style>\n</head>\n<bento-soundcloud\n  id=\"my-track\"\n  data-trackid=\"243169232\"\n  data-visual=\"true\"\n></bento-soundcloud>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"change-track\">Change track</button>\n</div>\n\n<script>\n  (async () => {\n    const soundcloud = document.querySelector('#my-track');\n    await customElements.whenDefined('bento-soundcloud');\n\n    // set up button actions\n    document.querySelector('#change-track').onclick = () => {\n      soundcloud.setAttribute('data-trackid', '243169232');\n      soundcloud.setAttribute('data-color', 'ff5500');\n      soundcloud.removeAttribute('data-visual');\n    };\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSoundcloud>` 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/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"57e62ecc0e24bc2cd64467dba9d0f9836eea0182","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2110252343.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-exr6PC5QOBjPadpMw1hjxoQcLnEv9JltShWUUb2WYK8x5aHpy8UVnSiR8JIuECwDCzyRXz2ivqWd0UIbKQdVvA==","shasum":"06b2a4a5026d9aea699a50da89dd0cf1c4eb3f1f","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2110252343.0.tgz","fileCount":27,"unpackedSize":1983095,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcigdOdCNt0e2JUMZKnoQ3+q5q+FtAqz/cLO8RLk11IAIhAPBigeMmPdjaV8JolQ3IzsiwWAodwZ5EJkNyR9WDzTER"}]},"_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/soundcloud_1.2110252343.0_1635457652849_0.7275135150871759"},"_hasShrinkwrap":false},"1.2110281959.0":{"name":"@bentoproject/soundcloud","version":"1.2110281959.0","description":"Bento soundcloud 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"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nThe Bento Soundcloud component allows you to embed a Soundcloud clip.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-soundcloud>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-soundcloud {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n  ></script>\n  <style>\n    bento-soundcloud {\n      aspect-ratio: 1;\n    }\n  </style>\n</head>\n<bento-soundcloud\n  id=\"my-track\"\n  data-trackid=\"243169232\"\n  data-visual=\"true\"\n></bento-soundcloud>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"change-track\">Change track</button>\n</div>\n\n<script>\n  (async () => {\n    const soundcloud = document.querySelector('#my-track');\n    await customElements.whenDefined('bento-soundcloud');\n\n    // set up button actions\n    document.querySelector('#change-track').onclick = () => {\n      soundcloud.setAttribute('data-trackid', '243169232');\n      soundcloud.setAttribute('data-color', 'ff5500');\n      soundcloud.removeAttribute('data-visual');\n    };\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSoundcloud>` 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/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"55fa3e004e2aeece5faf9a68717228077c215a13","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2110281959.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Yq+573PCotSIfYiDYqNUFMTrlYmn/6qHklCnOuF8p2ZIXyl/JkqBP2v8u+6emLEVnRl878fx/VX00W2DnpgE4A==","shasum":"39d91b40d7d363f60e30c73d8fee5ea6a03d78b2","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2110281959.0.tgz","fileCount":27,"unpackedSize":1983095,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANhdwCup4b/QVGvCv94H/x0xSo6WEbLjVubOnQDLqm5AiEA98RKBAyTk/AScQulRS55BWdNiAvbazp8NB39HeED/Ts="}]},"_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/soundcloud_1.2110281959.0_1635508296367_0.34755876894376736"},"_hasShrinkwrap":false},"1.2110290545.0":{"name":"@bentoproject/soundcloud","version":"1.2110290545.0","description":"Bento soundcloud 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"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nThe Bento Soundcloud component allows you to embed a Soundcloud clip.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-soundcloud>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-soundcloud {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n  ></script>\n  <style>\n    bento-soundcloud {\n      aspect-ratio: 1;\n    }\n  </style>\n</head>\n<bento-soundcloud\n  id=\"my-track\"\n  data-trackid=\"243169232\"\n  data-visual=\"true\"\n></bento-soundcloud>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"change-track\">Change track</button>\n</div>\n\n<script>\n  (async () => {\n    const soundcloud = document.querySelector('#my-track');\n    await customElements.whenDefined('bento-soundcloud');\n\n    // set up button actions\n    document.querySelector('#change-track').onclick = () => {\n      soundcloud.setAttribute('data-trackid', '243169232');\n      soundcloud.setAttribute('data-color', 'ff5500');\n      soundcloud.removeAttribute('data-visual');\n    };\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSoundcloud>` 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/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"1cc07336e186d25fc5fbfb2e8f7e12c4a5c79fe9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2110290545.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-RjBRsLQuwzkxL76g5kZZLWnF42PvIE45E+jru4T8ruZ9U8Os84h/g/NgrszZNdk4iPzV3aXezQbZazWQwGdcQQ==","shasum":"ff0faf5d86623787b12f41287ffb8cffcb401395","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2110290545.0.tgz","fileCount":27,"unpackedSize":1983095,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsJoshxkXJt62hd/ypr/mFDpSd7eCvtMcqxIphGRDCbgIhANh7IrpShc4vu/INyWmD57lcJ1knKw7VXtD6vrMV7MvO"}]},"_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/soundcloud_1.2110290545.0_1635592869572_0.3249096168477388"},"_hasShrinkwrap":false},"1.2111011823.0":{"name":"@bentoproject/soundcloud","version":"1.2111011823.0","description":"The Bento Soundcloud component allows you to embed a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nThe Bento Soundcloud component allows you to embed a Soundcloud clip.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-soundcloud>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-soundcloud {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n  ></script>\n  <style>\n    bento-soundcloud {\n      aspect-ratio: 1;\n    }\n  </style>\n</head>\n<bento-soundcloud\n  id=\"my-track\"\n  data-trackid=\"243169232\"\n  data-visual=\"true\"\n></bento-soundcloud>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"change-track\">Change track</button>\n</div>\n\n<script>\n  (async () => {\n    const soundcloud = document.querySelector('#my-track');\n    await customElements.whenDefined('bento-soundcloud');\n\n    // set up button actions\n    document.querySelector('#change-track').onclick = () => {\n      soundcloud.setAttribute('data-trackid', '243169232');\n      soundcloud.setAttribute('data-color', 'ff5500');\n      soundcloud.removeAttribute('data-visual');\n    };\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSoundcloud>` 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/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"7bd4192edeb4ded8e78291b094118653b1a78939","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111011823.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-y4qMIl6Jvl9+hxGI1AOS6qGTOa/8DTcdASalMelXQ78+4CVqireZweLBPN1RQtw1+xQUgOAXvS4kp+D77AHDaA==","shasum":"471658a260b3212e54edef97ae311830e003148b","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111011823.0.tgz","fileCount":27,"unpackedSize":1983221,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSfPzpnwWilsQesLG1SdDj1t9snPz5bK3njK08WCTWcAiEAqKoha7L23ft4gvZWyYwO/yEPQU++/7GdYgxcfTCe+zY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111011823.0_1635852298183_0.5217571528812337"},"_hasShrinkwrap":false},"1.2110152252.3":{"name":"@bentoproject/soundcloud","version":"1.2110152252.3","description":"The Bento Soundcloud component allows you to embed a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2110152252.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-4o467BVT0Ruosu2x08ateHknAtq644TISWIN9hGPtozxUBc2SRWWsjqfzh8dHRHxdwm1Z7t5SpaxVDRctcX2jg==","shasum":"26975fe3f61087162cd8b0355a31a5f71410e8af","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2110152252.3.tgz","fileCount":27,"unpackedSize":1983221,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbE9vKbmpy0KJixQPy7wRM7GrNO3gt7HHqxidebCFWMAiB3GkunnC34VbQYeopVQjy4kwedY9XmwIW0ygNdyUu2qA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2110152252.3_1635890630571_0.34915688654585386"},"_hasShrinkwrap":false},"1.2110212130.2":{"name":"@bentoproject/soundcloud","version":"1.2110212130.2","description":"The Bento Soundcloud component allows you to embed a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2110212130.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-loNBJs+LgWhu+gOvHQYDtZ1XGOzsnjNa3iYNRelJlzfGE7pELtG/howmOBdTwq3AMuFEwIoWY2hpTi6pDRK5Pw==","shasum":"8a563cc7d25d8fc815280670127aab1efe405266","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2110212130.2.tgz","fileCount":27,"unpackedSize":1983221,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH24sjp9rmVBAd6eRxI/yjEg+YyNPV8swKQnBmR/qitmAiEAnBaF1yIB9UGDkcLOq5fMlgIGlIFvnY95ImZ/s7NQhG0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2110212130.2_1635891267965_0.8710267887608365"},"_hasShrinkwrap":false},"1.2111022043.0":{"name":"@bentoproject/soundcloud","version":"1.2111022043.0","description":"The Bento Soundcloud component allows you to embed a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nThe Bento Soundcloud component allows you to embed a Soundcloud clip.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-soundcloud>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-soundcloud {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n  ></script>\n  <style>\n    bento-soundcloud {\n      aspect-ratio: 1;\n    }\n  </style>\n</head>\n<bento-soundcloud\n  id=\"my-track\"\n  data-trackid=\"243169232\"\n  data-visual=\"true\"\n></bento-soundcloud>\n<div class=\"buttons\" style=\"margin-top: 8px\">\n  <button id=\"change-track\">Change track</button>\n</div>\n\n<script>\n  (async () => {\n    const soundcloud = document.querySelector('#my-track');\n    await customElements.whenDefined('bento-soundcloud');\n\n    // set up button actions\n    document.querySelector('#change-track').onclick = () => {\n      soundcloud.setAttribute('data-trackid', '243169232');\n      soundcloud.setAttribute('data-color', 'ff5500');\n      soundcloud.removeAttribute('data-visual');\n    };\n  })();\n</script>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoSoundcloud>` 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/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"f4d548031e8e20aaea8ade649d3394d56518b769","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111022043.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/HeWJNY0o3Zg0V06IHwyEtk39imXxkV/w8wPZHlKICnRdzWBMB1FiEjEWYGIKIZzx/Jw2qBED/Q6EKDF373LVw==","shasum":"aa9cbecb8af961d25071be47f1d8bc925e51c0be","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111022043.0.tgz","fileCount":27,"unpackedSize":1983221,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVps2Hx6zqsDuLSZ1bX8/Eq1YU6PMNKr4bA7amlnsfCAiEAlKOrDG03ePkkIhvUq7icLqq8qUKQ/PUxtr3SOLmABrc="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111022043.0_1635938478262_0.954222169117058"},"_hasShrinkwrap":false},"1.2111180040.0":{"name":"@bentoproject/soundcloud","version":"1.2111180040.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Example: Include via `<script>`\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111180040.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-7vkgBL4V0NjZBacEfs1qZbNbTp4En7PaQmg/Eqc/Opx8nrPDBVdcco+DVBA+0oz+kkE8rm7iOuFDgJEiVhu1bg==","shasum":"2357118aeca4e15aa81a044e713d71c15f95a32f","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111180040.0.tgz","fileCount":27,"unpackedSize":1850945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsYECRA9TVsSAnZWagAAbhkP/3FvlzBF10d5M/408K/+\nzqNf9nmwlKHlPLgOpV7ccElZggb6ySpXYCBc/e0Xe+gZwELt55QSnVCSyKd1\ntTq4HfVqIhK0MPblaGfjcwYwYxhXz8s0p+cXBuFzusK+A/yHTLVwETvx4Yf2\nOkPgLfQs+sXfro2WGSyzILGxAjCM9elDt/wsGda2t/xLzizM5iKfO0tp8gHi\n0layOq8stqx6sewwcfX97OU6hQGzReCvPkRz29OfsCGnHvB/CUcg5AB+bP2M\nALlmxT2YUkx7eoYol7pHeaQkckRZWFAjqtXJGS34BGlp6cojtrZwptEEAxyZ\npJe06RUcCDg0FWt0CMwDxstuXWbRQyVYl0ls0DKjKYxLbuxjfpe4Se4kHMmG\nVBnMFhyB4vaW8FMn55f2QBNWuRir5EBJeCzA4zUelmrTr5D9GlVrqWKRGwky\n2VrhbEbfhgOzzlXaXfWF0m4cntaDpCsVXwuRhZO5LIm5DGVQ7Q57tnqa7w0P\nwn0t6FNf4JDSKBw8HyuSpwmBQ0jjut5MuVEnm7Smt4T9qpju7s4YZmYgap8w\nXb9uvEtCEyI06fYNzFqASXx1CZsPpCjbwx5vySbYW7AxTMVgnsGAa0XZVvDY\n6k6HoZ5l+dEBOlf6zRTa3spY4FIGCANGhq4rZkJl8l7Bb2vVcXvxI9E+frzS\nC6DB\r\n=p6NA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDxPW7syyc4YyuUDswcOnsu5BRBSI+u8oOFvtcsizDdLAiEAwWBA5TNfNqETNqhNkuBwJN2ImSmUM05hYrF0fIcM86o="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111180040.0_1637271043771_0.10722245469501512"},"_hasShrinkwrap":false},"1.2111060251.3":{"name":"@bentoproject/soundcloud","version":"1.2111060251.3","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111060251.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-TpVY1s3j/00Q1TizG1YPZDq38c2faFcQ+9d+dq0wuSJbRAKunEY3YE8SQG1P1QI62vW3qcHZJYBybwyKVtRBZQ==","shasum":"b1138da9735144ea9ae148eab9324df4f740b95a","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111060251.3.tgz","fileCount":27,"unpackedSize":1850945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsmSCRA9TVsSAnZWagAAQUIQAJqpORJo3WOr2220bG7z\nOD+WGFz9rv4dIFkr2CIgd3a/2Q62e7P2Svfpj9Ag+qaRfvpffZU/nodq3p8y\n5JeHihjAM5PHmLf0mdQ7bPTFl/VF3seciWWbDXK9TwK/PTE7j+JG6AXQxlbc\nKUMogvHamXddtPxg3HkmGWCmE+K+7sdAi333H3XrUl2E2uGeYN3pua1nvZhX\n77nhD8uiW6OR0HVPFyjdHNtglT9K3LoJYM1+nyGxODVDdt8GrO3mCpt/+ubZ\nqkBlzA/anjiSbuJO84pcZzJbS0d+/AYfJO1uXlOZ78jp2OzaiLVtoOSzt2jJ\noKXcAtyZ3w5tm8Xmp1tz/XqKZf9+fU8AigIXV77tojhjY678Y02EVfIFjgE3\nldQ2PLQZm7D6o3SURfD8Taxz+CjOgu0qQtBvcebuIKS1+LtIUd89eeQLVftM\ndIERqolkQKTg5B7zuOfGv70+2OEDqMPBm9WgUi1sSEuqO61MhUgo8Dn95v8G\nTYn/5aLABUkHJpQ1u4BqIGBhVPWg15W93a+pgOCZh8h9qPVjJWZDhnkE+6gD\n7t580QLyyeosN8YR3ox0qtMZEjbHD6GYtNEqOsfnnLWID0iZQC7qNw5kOB/v\nXV4WDwTRfho6dMR3Mxu6n9ny3x1gC6x+zmAcb741tn+Onfrfo/FoZD6a6snO\nY4UQ\r\n=ryZt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKzPB1hO2EX/1sz1w3U19qm0Gz4XNn/RJJih0xAgfsBAIgIUzr/qbLnW8vdd4fwyiKjJT3Z5tMrAcXbeys/nVU6ik="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111060251.3_1637271954095_0.12951833774259103"},"_hasShrinkwrap":false},"1.2111182332.0":{"name":"@bentoproject/soundcloud","version":"1.2111182332.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"34ebd943d9b16506b7a515b38941fdd8357bd288","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111182332.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-4bQkhkFzBpZIxCQ8yPI1981ea7fvwwqOZ6C/cMV5+IqX1HRFk8oM0EVlBCsxs5z3cntYsNRgWMv4qsjFfhtrlw==","shasum":"a5bbd9253984f15e40f52232bb1b638f7e7cb04b","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111182332.0.tgz","fileCount":27,"unpackedSize":1864212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl5eNCRA9TVsSAnZWagAAHO4P/RN1zLSrUhXjCLgiuJfP\nYmX3xA2pHe9bIElO1a/MIH/pbhrFTiQTns6lhGM/M4W/1x39sBtkJ0jWCHGa\nVJljfw0nnw6uhpaQlnow1ZHttl2Ipg+o8t+m94thBP0OwS8JNevabM74B1vW\nxgF83dwvze5V5rP2GJdm950mJXgqfdvfJuEzKSsjueWxAZyBkar9DwnScAnm\ndJANdNwMERyb5GliaqrianBacmKJcBYQaX1sMMPsQb6hqr6Q+x/E3I+Yguqr\nxkBRQBRjlqV0ECUCB9xLySfL8SkhtsgbsDTeF2gBU00P5TLWbhjqLs1YS/Eq\n9T5kFhyCxzpYEKBAjPMpaadsWV8feLT9J01LTFai3LYT+iFO9SLpa5gtJQ+7\nFjjK8OxgVe0OzrM14VhNWNuOZf1s8ac/T8EynSfvuXk2NM51AKCL4V9Keq4m\nmeGXjWPuTaH5HX8g8uCwXfuftqGfqXCBk8IeyBicjHyZutML27DqChayKsYR\nRr0Ts3bcmW46dFc75jL27KpBC3VyMglvsaVZXxaEt6HWqs8Go0bC3KU/xKiZ\no8oHB/sHwW/JI+3+T3ipFStnTGOkbF0NQuvKn3p3qwliQS1qFYTf/HPraNpa\nNP2Bm8584LS2N5rvGY1EgxBGfPIQATlt5X8knLZYwzJzzHHjfANRxQt6TNfL\nufBd\r\n=O29H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWS/sHhULzXIKQTCyDsED9OrkdzM1Uqg5w9rqNp3uVjQIgVZc6UiDNHDkpnFS3PcgH8+L9TuXKxdhnrKQ9yNR1wY0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111182332.0_1637324685444_0.97301051452701"},"_hasShrinkwrap":false},"1.2111060251.9":{"name":"@bentoproject/soundcloud","version":"1.2111060251.9","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"04e44a3695f8db307eda69f753e10665cfa70fa1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111060251.9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/YmRpYVZVkycabJzZ1RQlle7jDUqKAYNAUbN7UvJ84k4v2377eWgy7Zwu8df6mWa5DLX6H5rC2n6NhkrTpvgxQ==","shasum":"86d86519a2967dc1a8d261a780fd423b7c0dddc1","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111060251.9.tgz","fileCount":27,"unpackedSize":1864212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl9FmCRA9TVsSAnZWagAAjaUP/2hIDNa/oJZGLD/Obej6\nH+/bLr88cRFquSrTVX/qqoKlFXRW3Bb3a1SAHf1auakLIp1Es+PF5PLNsfkU\nbHtpyBiMDMPKxa7jylDHG9PvtSBMD7ixlp+H42Wdk27Puc1ovqAJUTC8vRT9\nr97j9+rqcTnGrj+zc4aB5bnGnRrHyONUuIOevbbFw3FlFQTgiHW88j3gx39P\nDEmJVOCESoJjCvMyh9X+ZvQ9FoYsLN1NaHv0OQmPVVixcpy0105aJH/n0eXh\nymTIAWuPUpebVVYbGOVzZ/kXUK5IAv7pgNHNnrhh1kMc4juooMj7fQja90fO\nrP49pJCAzndsKVQsLa211XTw0C3Uqir0dd0B2h1OeBcgtWyHnnNtj0MRuNlC\nbqT3SBypSYlFYIJ5RkrJ3odR1Pa5QDPQX6QJwj2C0fsykL1pUbbCzF9NTF2Q\ndV65Q/l31yTD+uXD6Ya7yHj0mCJ8mNi2lSgu3oab6pM2zqE2udiT67UIdYaC\nB2rjZ79/pIUd0WV7yhCTeODWyxg8qye8gYaV7meawucw9RrVtMNWsPmqTQ0u\nG6XYiE76Pujn5qSYo7TMJZeGY+BRiupqlU855iR1W5Nlpn1u4VTJieuVdjmL\n8T7h9WvtoRqa42yY91QxlsY+a/vyvF81f1dibjQSzAO1yCsu8/74feiFNB6t\nej9f\r\n=mi3Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqFGt2JnZHDqS+rhOJW17IemfUL3GDqWBSEVFaGvFAEAiEAsC+d5O6MFrscRj9yMe34nXCel18hJ2A3It/hS7fuxqs="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111060251.9_1637339494354_0.4964131076082803"},"_hasShrinkwrap":false},"1.2111191951.0":{"name":"@bentoproject/soundcloud","version":"1.2111191951.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"22d6da19b9e01e75e6b67f54cd425c465822fe8c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111191951.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-k67f8bGZW90jHM/iqr0bKxn9vqI+wbqZGDFAafuTl70Y+CG05nVL1xFmhy831bTWm7X8Y62wuDYcvK8XfpRecA==","shasum":"996f2547ae8c3fc672e6d44cf71d378a83c3699d","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111191951.0.tgz","fileCount":27,"unpackedSize":1864212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmOjPCRA9TVsSAnZWagAACg0P/iqyyFvaOTOlIXsrTctX\nI0iwfFFlMzHagPd64tbWQnrqYkFBIqX+llJfcBqRtv9K3tmsFBMFPmfk1jBs\n0KRQXCcnrnPk5dcCt+svhNJS1tNjL0r7M+7vhBx1fBUR1uARQ+CH+fG4WtH1\nTnY1/mYfCBAB5A3lXE6NJcFjEnan67R05Dyw52E48TwGqvhqIrxgjk3h2B/S\nblj2ucNviQQpao/0sFCON5pJGlXt9NPMaRaSVSs/m8er0IoH9fTg36RqA1l9\ncOAAbbg5a7+gHRsjnyryciv2i1CVuBru6g67OJMBpCa+vyaLKCwMU8ak/1AI\nmX0jMOgJQYZl7gmsDbsBlocu1ANZLfLW/tQfVM3MLjm5W4bBNW03E4bNFOhY\n+ZamG7Cje0JhTfUOm6ibkuLjsEff5P6aP8un7BM1knEVp5Q+MgmQdeOUfBGB\nf3uhEY2Z15qd7g4dBbW5+j+wqa8IsJ/jvQAHoTJ9HCweooiiONr9vc6BqQQW\nd+w1g2JwlCepXKMlKPH1ob33YIrw6t8bvyfbYdhM2khzVmUb42K0d9PUnfmr\nYZtX3ye2vCCF9llH765mFMQjGeTEXxJl3kM3ze5UpVCb3JU6MRfm0VG5O9HD\nlyIFJBmpwefDODeey1KAfLdAm1o75s5OF5JHOkkalM5KESt2iZWIHc1lb5mu\nxkyg\r\n=wYGG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0MrgoZE3kiNH/yoawAdKI+TMOQHU4dX3EA1wgE+tpTQIgJUv4tiEMQKPgSO7ikN0p9ZVM9xeZv6JSQrs0+M/2+CU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111191951.0_1637411023513_0.8028565271544266"},"_hasShrinkwrap":false},"1.2111230244.0":{"name":"@bentoproject/soundcloud","version":"1.2111230244.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"d906c0bae3e05aebd88696b9659414f63c1ca45a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111230244.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-fpztkHXxRsvEp9rLleYi/wNjqJU4RkCYBehEbW5u7pyo6/m2BQNsjagw3quHfdC0ennEv6rGMrXhOafD9aPocA==","shasum":"291ea3ff56579a93ccc273e07dbd4b46c8cd0c45","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111230244.0.tgz","fileCount":27,"unpackedSize":1864212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnN2JCRA9TVsSAnZWagAA1v0P/2MOAFkqd1XPrgSEY/0h\nM5kJFCYrHh46O32BFr0SZ4snGCqk0V/MsEAgc28KRy5tP0CQugDaAC9RgofG\n3zJbk2UJV/SxMAQe0GYnzLM6lPKRxaoKPEssP+cDrDHvi1HvNJCx5W2RMaul\nOC5QlF2jYFmWNE6kuBI7/KEFvvfgR12Kr7LajGjbFRwHcTOilHjC5V8y6P1h\n0hpzvEdOCxdmcfNLXP9Zko0S4X6zwj8yDKqbPhpSDHnbv8bf4V0M8l3w20nw\nxPX3gt8YW2ZCrhu0OOCxnv6ntPuVHo0arUsV8BxBCGnl+H5naDbR1hVPXfMX\n3wJVK7gMOOcrlsDS514Djaf8Q6VpZ+jreVJIFSKQSdTCTPctUBJnrxvz7E7H\nxZtyGD8iH5TzeE/5UEYLqi6ZfRVZJhTGI4s/bsLloP/sZi2xwMp4s3JeoVVH\n5QzlgadsbrRce5MIDYyDHZYAb7aW6TpNJx0aXCO0xnuRxcqr0hKsx+RR3jFR\ngMrbIlRHQpiVFAsOx1Hj0zxAj101XV14pq7We9pv2+fZXEvQglTX1o+rz67+\nHRKSg1whZww5M3m2dgiilmcStuEokB2UNk7zrmEkg7tpfVxlSJ2o0jABOlUH\nUyDpmcKouE6GrN2tlsAARV9IL53JHrZugEjLqz3BcxGHWp4LsLbZmF1VPLGd\nIfN5\r\n=kRg8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnKZvxXo8vAtP9WYHyOUrTJtRtlGXbbpeArBnQTqjMkAiEAmk7L2kbNytLv62KYEfDlI9D7vT6lvoxb4SmXpV2S7xA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111230244.0_1637670281761_0.4289505257526587"},"_hasShrinkwrap":false},"1.2111230636.0":{"name":"@bentoproject/soundcloud","version":"1.2111230636.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>data-trackid</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-playlistid</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-secret-token (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>data-color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n<table>\n  <tr>\n    <td width=\"40%\"><strong>trackId</strong></td>\n    <td>This attribute is required if <code>data-playlistid</code> is not defined.<br />\nThe value for this attribute is the ID of a track, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>playlistId</strong></td>\n    <td>This attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>secretToken (optional)</strong></td>\n    <td>The secret token of the track, if it is private.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>visual (optional)</strong></td>\n    <td>If set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.</td>\n  </tr>\n  <tr>\n    <td width=\"40%\"><strong>color (optional)</strong></td>\n    <td>This attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).</td>\n  </tr>\n</table>\n","readmeFilename":"README.md","gitHead":"46e8f482bf5e3008ef07e950034d194c48317990","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111230636.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ukqPQ9QJsAsdEoBCSUWzncWViTZPhAyAA0UzD6ThudUONIhCxvmUm09J11GhtogtE9XgiGQqP1j5MAQ2UZXAEw==","shasum":"d7a6c7b2664f2cfdd390adc4d58bebd586323ffc","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111230636.0.tgz","fileCount":27,"unpackedSize":1864212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhni6KCRA9TVsSAnZWagAAEUMP/1ZRP3VMaEMB2ZjlI3pm\nB6A2ATGzHqqPxD3gRmve3YglxBSTGZOrTnAxYjJfdgBGsZWAzm3JtpCM6c8P\nQWcGFfqGYbP6s9nHUyMdjMgA/PRhiLjMS7fwM3jZX+iRTs5pUgMiVF2cquiR\n3W7+tIfreM6rhH+mAEF7iDQVVOvSvAoIXWfY/hGxkm5l3CcyyqhPnOQcGge3\nxoS8pKT9GQriugVZ/1ZIVY15vnTlWx5j/DdAAeht0mC9fy83uVMIjlFpwFow\nyyyZct7Vz9mB4wLO2hVBo9FMMF11jMlOtXk7IcqbtcyPjJw/UESAdta82kzN\n0uIf6B4rNxoc7tEq2tR/9OiKwTjaXvVJL6j1n1uQuAnzpFC7v476DZzhMdDK\nZceyultwZ4x4peQE3gtFJsG57ehuV97vo1gou8qMWVNSpz1wEc8EwdPGYXe1\nXtF2JYjTxsMjx8Xha3dmTHsIs/mXfSxtoNuItMw44ujdcdrYzacxsf0M/0yp\nB9qUOonSoRukL5+hM6Rj2a7k4vYoNDvWKAJ+wagrQcgKrnbXMz9TzuA6q7xQ\nL6iHpWpt3q7STK4+I/OLR4KWC9soHElyQ/xCnEdKXV16Bm2FpHHnDWD4ffoM\n9KMdVU6jjYMR9xKd53NdZn1Zcte9DCq4UKjsYQjm47bExkki3E5NH+C26/J1\ndc5L\r\n=p3CM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdSIkF+hxd/UpwSRCpzBM4FJRZk1TrEmY6DZPpsH+D7QIgBRKVkjIiXDz8TOpm5cmKLUQWHjnkq7BKVtvQpeLmzsw="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111230636.0_1637756554488_0.9576661568984333"},"_hasShrinkwrap":false},"1.2111242025.0":{"name":"@bentoproject/soundcloud","version":"1.2111242025.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"b78e8781ff3976b3bff1ba881cf66dd2609b5c07","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111242025.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-6VLwlKy5nBm3cAYThRE9zg0N8Hep/XViSCZaKk1I0oodlv0pUWacdg59U0uBezbFRiI6XLduQFCeZAodOGD8ng==","shasum":"0706f25fdcb2e2be5cd041f031f98e40bf86eddd","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111242025.0.tgz","fileCount":27,"unpackedSize":1864530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4SuCRA9TVsSAnZWagAAi7sQAIVdp+rsKNOGuAVHmRpK\nk2X3MTB34UeNNoYi0ZIiIXVQvrJCUAJcAIr89fjvSO6Jbb9/ruZxOuM7SOpV\nlVz3Hs4BMuHE3nNh9laWk+q0T8xDCy1orJbm3LNAcbG3ae9uo1oxnMD/t2/+\nFIGbuCs5Jo0+Xd3riOKfMwvQ0S0wOB3hzt/6fRKGaqsaj5e0SLDUJy+ZrU7C\nGO24Vj45cyR4GtrCjpnZPKrm52ebi9igEtbziWrCrbVgMfPbkghlfrYgBdhM\ncoR8B/Z2jF4ZEQmUEPWwlo92NTn7HN5m3fvxOqLlUF9AuiFpoLefPwGvRTN/\nkZK/7hT8k7z9eS272z7JOLNOPAdmOYqatau5CZtdw3yxnBW8At/6dysau4Ew\nCp23v3RZPZodfPDRf1WqcpOsTqAxWLdmS84nWq/17/SbnfxaQInOOSomoNfX\n2JvaY7snSnJQdJbiKFWCODoj5SkBLm7uyHviBif7UR8mJcs9AFyf/y7F6UMk\nsfGRhMphoxilXTq7tT+v0fQz+JDITcG8hefC7SqHK3Hz7qg02Up5v/sDmXUX\nQVFeNCcraWj6hSyOxZkzbv+2S8X9aaZ6qoJmuqyItOM2y+X3ETzjU//3nTG0\n8QVvkWUipG8pGHPgjKa2AAfGKSJGN1c5X6G+DsWcDukQgeR4rY193K+I5ue+\nKUgC\r\n=gXij\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDT7LZqNCnGzjbWEd1e9sZ1iIk662Pt2U/SXM+8OFRUpAiEA5vkSyfwf0CgtK6R5rMej6k0TyjhhT6uH/55hg+3PkH8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111242025.0_1637844142556_0.042925351243016996"},"_hasShrinkwrap":false},"1.2111292120.0":{"name":"@bentoproject/soundcloud","version":"1.2111292120.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"e938f7c9446e2d1eb0f0f865c0f1ff42a4be76c5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111292120.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-+Suoy0BXf3X6Ten2gEfYp28Ax5cUQpPEEWfCeOgoWmkcjv6v/wRcV0bWr5TI03Czc7S+LF9F+KFxNuC5j4wLSg==","shasum":"8ee54646809a8187c63655dcadfddefb217b9446","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111292120.0.tgz","fileCount":27,"unpackedSize":1864530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhphv8CRA9TVsSAnZWagAAPkkP/AkZ5+MsW+I5bnaIPSDI\nKzR+yJNb3qlOWJcI9Bom2fDMqNfbFQvol42A56x5iwPzuPX5J/u7mYLWtj7x\n8BRW3+LwHqs/RqHNWRnS/zut45u+Txa3n6qxNMmjLzR8nZSGdxS12zmdFUta\nVxT6x3OHaDrxZoJaoAkmrUgWQYExe+bXmvkwgT6AKPdbm5Y8zidLlNohI8vr\nRimoy4eYqU+99eqUJQjyjAcmhJVc506h4KAMF9iWhOh76A10kbIOQwEofoGN\nF3Me0DZ8gOHjTt6Nh/XpNEYFXCgvcLO/fGI/XpLnYsqRh8KxewcBPaXxS6U5\n5E+SEunKSb0pNkpaY9YhFaPdoQBHKK4l9EeuLnwI6OH11Svk842O22A03bJB\n6tKHE0yuoZpHInZYs91UvR5X0Uy01isFJ8lSCDIBNQVw4oWzuIgaYy0GfS/h\nhLUKzTKdZ++oQCt8hD0jSplJsThMoNYeNA+g6VyvgLNRJEpmT5HODe14Im6Z\nSFGPONP/XHBvOSSNlhEvTLXnbT1gp4NM7nWLotSqi3lWRX0tddTOZDUo6Kdb\n6I6j8cYZPcPjnz7wqt5baCU94rHTvPuOCKdZQrJ9TosWx11+rDOtZWH5bsyG\nmgoQbzLP33nDVmjnUhzHK7Ju0Fw/bYu6nTfVRrnvFMQELbfJA3NeI5svJOVk\n3KB1\r\n=rLXn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1Bply2TRjQNMFCE2uJjsFJEVWriydljzng8qWJchq8wIgSmt2ZCkvO0vxVNZ17+S+JdcteGwIc5YIerdnB17Ynb4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111292120.0_1638276092525_0.39675833765805524"},"_hasShrinkwrap":false},"1.2111152338.2":{"name":"@bentoproject/soundcloud","version":"1.2111152338.2","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"27e204ed206cf75fae0a37d8f110b5fedb45fa7e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111152338.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-NtDd30JpxV2r11vui4ODK2VFidx8Qn/bRB6Zxy3jc25JgG8sO0FZ/SFdNg8omldYheYP7e47zLMNke5CYbYBug==","shasum":"8bc57e70868ac0562766255992236b0eec81a99b","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111152338.2.tgz","fileCount":27,"unpackedSize":1864530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpmVmCRA9TVsSAnZWagAAzgoP/089BUd5DBmCRPQoCRUK\nyCeRO4jIxmkiddZHtM5CfSyRAVATHWtxhqJjWye2POYOxCEzXHUZ25Cg6Bsv\nQB/XX+lBkRYH3v2XsJUUSPG+lbEQhO6SuQLkTV0bTG1tmIuV3Q505adTpBmw\nJuSiUDKPZevk7NSUyVEFYsxyXtndz/Eb1KmISW8pcR+F5VNgbZoJRrWwQ9at\nGJcYCkFpLJ+tBQ7oYn1G6u5t43rmMwHRgNxvN5UNieVstySGmGirZBSQZ56A\nBHVoGAUIXrfMRGDuVbWyswqvwNYH/JAGQdE6ZqeJMn55hw/uTFe3OqQc4TE2\nqcMV0MsYOidjD4Ov96hvaq7l5sgQ9r/gFEvXGsAB4NzvfazMltyZsxSyMuRe\nNAPghqg4ACl4w5dJMDBPeuDYyJStzqNpY5+KPD2vVyqkzdFYkz0wl19TD9EX\n2ErDdUkzco/QEaAXv0ImhHG6eIhrFA0w3tOSqXsEeOZ/3ULFBdPWTlfCrdnP\neb/lx6DXFugKyrGzFyVinmkF0wPgAgWxqY+TVeqgdI/uBY8WjicByeK1hYKY\nCx/T0e7a/hwD2NRM47FOKIS90A9+XEY3Zk/CI+Cf0d2Po/fIDUW2yc1Orqyv\nm2QkEjwh+w2HtL9plKRVUdhRV7inNGRaBVI0qpT/ENwO/PZu97cLHLZ+5bHt\nlLj9\r\n=wa/z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRcRHMhQ2LJN5/HzEp4hWyN+baSFxLwAaqL4QD39vnCgIhAOeg3SlO2n0uBxz0y06C2NbNjIw2C36hLQIXCUUgzI+D"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111152338.2_1638294885543_0.4980507504328995"},"_hasShrinkwrap":false},"1.2112010058.0":{"name":"@bentoproject/soundcloud","version":"1.2112010058.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"6d1060a3a4288fb99047cc700661d589bc9e2a01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112010058.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-NBJMjZieSxq6+lbvMHcRHKDSLUAeRaaZndhRkaLr3y9wa3ZSPPIx+qzSj9yjETZ8Z5MU0KuQaL+Z5/ur8UST1g==","shasum":"b1a3a20c8f614e6187acacaff1e35286fc31f6bf","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112010058.0.tgz","fileCount":27,"unpackedSize":1864806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2g/CRA9TVsSAnZWagAA3kkP/1+SUmhgBmHSGwCmFLjT\nlZtvEV9uzpFQjcHgzQeCxMRl3uOOcuyhgTPmt9U6VxbAP8yn67F12W2vHc6e\nOrBNY2wZX+iDATwSe7mOKMhO8L6RnwXKcfNvvXetJRIlQKzFXG0pz1NimP8D\n0EDFU/UUVhqO3ATWsijZQFxBlaommL8uHnuUt7/LJZ8cbAc9IK9CKfvEkreW\nC3xD9LoZ/HZbAGvQDuiTiEAHGVNY/eRhIJ58l32aLDY8SmNW6ive2X6Fb6jy\n8OpPuUsQU/PoZNOAIjHMKLsgbRHm1+KGb3SkrTME3HPGWqI4WU9/jBM6ma+a\n7pGUxqFx4qrVRR7cZFoqROYx0DhXRIOqhBLYmeet82Z/1NcILr7hY9n3J/gn\nfoEcpnIVfDR+HK2sFoT09tsO7GaZ2odsaCmAzcWh2gKGdb8QZG7qlvyx98ZA\n5h9IzzOB6Kuw0EeFlkzDpFoPJjZi87GHmFg9UaGn7Xy3X7jBI2OtZ+43A1lf\nEpZ8i7WuIwbDAcUL2eyP7gMvYNDUw68CS+rovGL5XlG/fFNE1D/ojaemeEdP\n5M0AjTsc0wUi8c8E8nNX01Mz6edvYOCx7j16nDzaINQQbz5S/E1a/efZYDCE\nMCgsB8dGnjkry9QGXfhloAdGzHnTSbrWSbwdWMkU1barJ5vav8mrblBUhuk5\nMROD\r\n=uDR9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5ZmaNqPXcK67urHX/SWBBLkz4YUj8s/7SjkOyg59czAiEAmwpOfNYXBM/6BQ7RxhSfz2dxiwKic4d2QTJi3wLh2FQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112010058.0_1638361151389_0.6462013443028496"},"_hasShrinkwrap":false},"1.2112012300.0":{"name":"@bentoproject/soundcloud","version":"1.2112012300.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"4ecf84d856583465c1ab59847234535fed16d55a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112012300.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-jVWl9gzNPNYB2fLrRCeQp2Y5ojh3c7o6k+qbxo6W9GbZy9c09WxyRVNsgrKC8vfMo4bqs6Hu7R1KffxABrmtVA==","shasum":"b9de2e2634a206ece152026ee5223ddd52c1b113","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112012300.0.tgz","fileCount":27,"unpackedSize":1864806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqLyICRA9TVsSAnZWagAATyMP/35g5UQ458e8Nk82FKXZ\nNbUgsd5dr8agOvTrkco64glR2SU4owQI3RO+64Q4cZGUlTO4K6nLtoITFTLF\nDPzTIHTstLATmu/U0ScaO4x9pEVERk5y369cQjVFKJ9yPl/0WA87GkzwSY2I\nZoYCMOb8J/KAG6GfaeC9CCSN66VN5EdfhAH7PZ1xWWkD+o7OKqqYZjerG2yG\nFTuaOau35f4VTtHeeSRJhQ4GyLFeu646g+whgFDgS84MFGpGYANxEWXp3Zre\nVtGuaEcM6nZhCBvRK0WbNvPnosdUK5WTdwuZwGcgO4z5QdC+Zp9bRDriRhGd\nhlXWe3KLzv3IHBej/Qc859TsFRMjysRag/Eyl/ME3RJT30/LnJTRM4f7KQ6D\n2TUbO88bZBvJGAt2V5yeYtlQMQYK8d8dOY9HbKEQ0RLVYIJc/UXyrDznMGiF\nCGtKEeV7PG8hWPqCZW97AcXXaPwN5DsWo7EjloGZc4a6MiegSdN/Wm3ecQxa\n7YvmuFDZzH3SdHXADOj/SdjJJJyMtv/NghAFKp5fd0lVwIDwbT7uubnKxPcf\nmR0XdbuW8/jnxsDYkSwZ+tbDW+URUkUbfFKpmD8xDYoSDf04EkDYvkYNvNr3\nT2h/bwge45ri2TdcjqPzto+4pFtTS+9G42sEA10jHQP0DysG7My+V77sBCJp\n2sD6\r\n=dC8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGF/L1zhO9sd5/YYvwJRyE9s+i5EbcCux8NJexi93EyQIhAPPcv33GdM0A0mVomvGvXinR45RjmhyctRS+TgtwYVOO"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112012300.0_1638448263921_0.10527528711913003"},"_hasShrinkwrap":false},"1.2112021656.0":{"name":"@bentoproject/soundcloud","version":"1.2112021656.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"4a66d3f7120b51959ea01867aa68d516d5e0dc36","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112021656.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/vNlmPYWlkHtdIJ8+SAMffYSaVNTDP8ILk+ljgxvqPkuZa2XgkJPFf04wemuV9PSA46biGjL0E4DAmxBe4Ha1Q==","shasum":"5ad131df13709395ceaa6060b4bb553a525f37fd","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112021656.0.tgz","fileCount":27,"unpackedSize":1864806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqgvvCRA9TVsSAnZWagAAENwQAJVrjI9dufy7upqo2eeV\nBdOrBBpiUEpxS/+t8SJWeL1i2ygU6yNAOzmpmGR9npSKwkMdXXhm0zpzS5Fc\nB7Gs0ysOsp5LkP+2CD3KUIR/542Vg2P4jv96+6fAUW4gxO4r+DDvgOt3T0c/\no9qk5iGp5z0u9lOuVO6zHBdBBoZMkzu9Rc29gkLrujdZTKNr+yMQ3rZeY+pw\nlvD4+yFzljp4yP7QwNn+k3phGwy/2jwxzswNdqPWc8fuTAlAGhwRe2Ur+RHm\njRUIGxIMNRgB00P5of0rw76h8y3GwWJetWWih7p4ylUegO9NUBjAJaKd8NGm\nQewtKNqKL0dCe2/p5L75FiNwCftmAn3SWA7nBl0fiKtPxarxy9OCgzSV06ua\nlXEI5ov6CSB80gHijDK6ORrQNenebFG1nMZJ4KnMuhePuTaa6g2OTD250jRy\nf0+BC+fUt68Ry3JVon6WVYfaZ+QT6Tjr75u26EYEf4bTlJ1bHP6KobVQiqpK\nOS6Wno+0CjndZ2SKesHRmIpueEjX83DBQ6OBBPvNoFcllrS34P21XQCXOFCL\nMIseo3O2kkGJdBjBrH3xA82uymqv4j24r3CpZLTFG1mGscPkBLqF7XUPFkCU\nv1ZrG9c4PCsO0maJEn01GgN5JxUXCbRuIVlJwoEbCu+izTP6/ktBKFpo/yP/\ndXjY\r\n=9GCK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBDAefznBVVgR021J4PVIMPO1vXXbQ/MXdoCDgYPc5mgIgQjrSZVnH/y9Yndso/kSQmSYgsz9yNI95XzFzB2DCRbM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112021656.0_1638534127691_0.5236526453328751"},"_hasShrinkwrap":false},"1.2112032204.0":{"name":"@bentoproject/soundcloud","version":"1.2112032204.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"80ca53e97f8ac619b78398d429e0031f40cf68c0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112032204.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-eHBGAP4MA1yHhx3ansiNQVbuGRfpPD/E37l/bzPs/YLXfvbBoIfexCoZLhT2eJym+jEbn+ybHMngET6ltWkOIw==","shasum":"961ead33d1753e99eb75f76b4162e9d893e125c2","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112032204.0.tgz","fileCount":27,"unpackedSize":1853855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq1zmCRA9TVsSAnZWagAAM40P/R6i4EtoWRBQJ0uUlI+q\ne5mKVhjvAPiJbac39LyEzRewK8FZVI5hX3IobIRvmK13zdmIF3L1kEV1ROv7\nawhTY0WA9i5JFOASbLoI6PTqFniq1RtdJivn7ozQFY3dzPJB6A5qzCVxWQqY\n73cdtjaO77ETHQqVSOjxG25MeQh7LlIn6cu7KJN5xM21T08gfSJ69NiCi/Zq\nFbwBBZSe9ItumVmrUduiw+eaGiQvJcBXcStcjgwqN2L3pOzPdgHSGTEH/Y8n\ncRpigohvOnsgb/9A9A/myBqsbYSzsDgr4pq6WZtIDp0b0gsazCaYkOhveP+2\nWX8TFHviimU0pj2eeSqFXbVlrHjq8Z63UpB8+6QcElCzIsVfX+Z6q/ufPZIZ\nwiFhs5yynPkpFqEUs5xRjOD1MuZ7VLlnkNknq67duXGRMIZMzfeBkMMfizLk\nH5MKTMYBRdQbzQ9VqrVD8iNlouWpNx3vuaBJAko2ognHifO8vQzcaeNUwDKq\nB8nc0MMvHBWWOBvE7HmH055lSRB3Ls2CsMjveabkzJ85I5yuyp/gv5wxaGwF\nht4NKa4uqKB4OImGhoiFNY/N6YeyDsZM3rM9QRivMwUx1LH9jf7h9d+YoPNo\n0PDcjDKbleF/PAK6NGOyWANMn604Or99xFZG2L/D2IODwSF2GnsnA4fymlv0\naIyY\r\n=XIJG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCib3OmMTRvSt6mfxp8WGPZ3z5UTBYdd/A0l2LpbMpb7wIhAKZCjURpAXsFuNUcOlsMrZI1LJ1Dyg/6AulNlYr0XJxT"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112032204.0_1638620390264_0.05015455621996456"},"_hasShrinkwrap":false},"1.2112062322.0":{"name":"@bentoproject/soundcloud","version":"1.2112062322.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"cddcce65024c209c9420ce0567f525aef4fc971f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112062322.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-MQjKLjwFpo+z2RCKOg+i0AtQ9gwYazfgLX/oU1h0Vqmiyhn648V2cMtdbCa9gqxY30MUqsbIYqdkXnxGhrmVvQ==","shasum":"e001484db0cb4afb9e68d4a631c333d878d43f93","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112062322.0.tgz","fileCount":27,"unpackedSize":1855971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1MXCRA9TVsSAnZWagAAtPYP/3hd5ivHKHwjTBSryB9M\nd7oXu3WB/81GSoR8L1f3QKd8osFxIXIeNhHaUC0tO0JNsWSP8mVqZt2sdKLw\nZeBA5H1WC2bb3HxUS88K+yEC0OaaeurZh7rnuAg3sgNLWrodPdyCYDorzRKr\nGbe9UUgmx3RjRDauHuOyVDtXvEeBp1YnOpT7W68v0zzkeoirkPeUR8Chyrps\nDq4CEhKOmyuIJ1w9gaBx2yyaNHmMv2k5FSwumz29hnnZqTKJrKCc5zOmbxDc\nf2/3BzsLxKCg90ydkC61imyhs1RRGS4PL0BtRPtiMBMfb2WbWNF+DiBtpS2y\nlI5GiqmB2jzg4OrORyRacWbAGrLu25TtYUe6bv2GvweAsRk3rG58k4ahN2eS\n6Cvh8CVXAZMZbOJNU4eJkdMuetEa2q0jTU8UkFfHKFg2qQOZMM00mMbhAP0g\nIDsPfXPkGMftsHMaTtWhRL4x0HSP6kFzHM30k/53/1kGNv2xWxix3MKSQHB3\nhGL1JCvTdPHX0/Rl2th3n2mM3UPIaCTGsqFbtcfJZirYU/Y8CtpOv6cXLw/u\nnGf4P9bO9vWJC/Q6wcD8i1bgd7AEIMgp/XCIsR06Ez1Pl8oeNeZ4iyHPJ433\ntNU62z8d+7q3RDjTWF3vLEJ3iCNFIrqqWSWcHy4PPxJJNFDPWpQDu803vrkH\nzX0i\r\n=AVaJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq1KoQ+p9nBOKOfuGhfp3nzuHlK9gvZzZEDxXR4mP2GQIhAIL0RIUC1S8QvduzawVGCOapuEeZYVt44KoqAo8v3HdI"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112062322.0_1638880023140_0.12297868673788925"},"_hasShrinkwrap":false},"1.2112062322.2":{"name":"@bentoproject/soundcloud","version":"1.2112062322.2","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"3e8072d191c8771ac14d19f2122bba93b872265b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112062322.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-UnfEQM8UfzSKEGdx7Y8j2ZNMRdNn5f5bAYld6U9voYXMCrHgk/mQdPbvaPiBe5YEFMK7a8i/drDwrnhfdsgWbw==","shasum":"096d22a8b3e2f915cc976695c39b27e3b1180e32","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112062322.2.tgz","fileCount":27,"unpackedSize":1855971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr+CWCRA9TVsSAnZWagAA3tUP/3vL41rP5nlYV6FJxW3Z\nc2s+zXTuRglLLIAXNuh4y2pv3QWnUCJxiwTySaDlvX2emXf4zHnonHq4CnGl\nJNJhX50dOZsjclK8SMo/0+6wBtW7gyvYKlb3s63Acn/Jquo9G7Apr6BP6uB9\nzCrughEqeAXsAGX9CE9cLGJmgx5/a+XcD2MebWapwUXJpg/hJjdnFlOrW/hp\nX23sE4+f8ZLdW+/GsPPj81a1qPhCVAsqzwJNqpzVhGafCjEM7Aur+9Adjvkv\ny5bPqK40GmWlmtsLWJKKQZpnswnkD0uguuq8NapVQYk4Y8pRuYJZqqLY6XoI\nD4P5KO3TtxSpFnLz+oeFVJEKTr2cPKV+LYY1ljvfu2m7Mh0WGwSDSp8C9AQR\nzNABuZGqTEBI6IJUkckuKJvqyf+UD0Z59yaf0YDb8MB9fUgK4ApmpRUfUmsB\ngiQk5TQ+qlH18zkoZQlDwvhjX5aChNvctbbhHnz3qTFW7lLaH2pb2ojf/MRK\nehJDXIMoZYNyXcauoe9TUQQV/sjVkkS+JUOffkCBTS+CsjRJUImGr4zpx1EK\nDhWqCxKU3sCg8+LZdwnxSJPLPCmxpS8rEcuFUCwxEcAIsy5eUGHqKy8blIVf\n3JIcQCwl5I0JSVj/r5UB3OvcUntjeMIHRGf4Dj30YHliOWojUI3xjoMRY7BJ\nTad3\r\n=LPZS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHs6I0hNA1o737n83xkqIZ93SkoU4OzzP0u7jTSsbTTAiAT32Ia5FmPptwXuSMwcTUv4Q0jQLVd7qDIUrD4AYx0ZA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112062322.2_1638916246537_0.4475993787737955"},"_hasShrinkwrap":false},"1.2112080230.0":{"name":"@bentoproject/soundcloud","version":"1.2112080230.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"6d03180e136b7ae380fb9d5d3d6fd8c0d5b28e04","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112080230.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Jbs4+8czpQqsbNIDuu312Mpq1NiwgpBJMcqnRtOqB3rzTHOXWfDQ0yaDyUWxmfGtBnTrhxgFc+7QofnaHpt3fA==","shasum":"32220c4cb9cb4b59fc19aab8859e63521c4ba1b1","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112080230.0.tgz","fileCount":27,"unpackedSize":1855971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsLF2CRA9TVsSAnZWagAA+8cP/1eNQsyqi/I0FB+k3il0\nzkIXXHwZJhlt6Em6/DsahzvHvvKIPaMnjwV3tOvqxr3HL2sDT/KzTE/kbrYY\n73Voy0dr9tabDdhDHb5ITR4n6bjYxv9N9eqkTdJs0ep25I5InErPiAiOSwGK\ncMZIzrIlWsmrtHijH7+ZA6rEnmO66FBBLoBO2iR3Pu6R4a64A9XCGSa1nVDI\nT1piUA+95aLG+h0eNXr5k14xO0N0tiq2A0FTa3OUge7slDLEkB0n5S/FzNSy\n/3yVyOwOrPzlIvWw8Jf0nIyZfPRxT9wEf5z+7UDTSX0L7b0MNPADL1sv8Ryc\n+Pku56P36xOaYh13w0mEltBmmSmiG1bGbJY8M0viNddAP7NAPzyp63qpP7OU\nB04mVWj91NKI2gEH9bGv+BLV+pz/yRxbRJuJRD3Dv2ZmmFj/sARczk8Tbsaz\nLeYfYMj/F/jAQbxBuUDl5sjEouVXaA2s7A2YYwc5DHL+skor2ddw0CWySA8B\n6l+GDGG13X5M8GFSYWDGeVIem7vdsjRq6i1UZlSP4iekHKbLb+C0iUNQqiqb\nRsnFmUyTLlwPin82GsTn4J87yJyzqedUNvaEljJCTPZVa9jbg6aZwxWDlLPL\nf68QJQUF8Uw/7wq4pN74xC4OsQMz2UovcLYUSzvdmWVp+oesR9bj7e/JJr1I\npJfv\r\n=RBkx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO/3qXRM4L9bO0uR4BKEGAoTImsb0yJPJNvX9wIIZu9gIhALWGRcshLhbd2ziKJR9OHq1aUMy/y8UH4DLUjIsA6Ssc"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112080230.0_1638969718093_0.3749182077042976"},"_hasShrinkwrap":false},"1.2112080230.1":{"name":"@bentoproject/soundcloud","version":"1.2112080230.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6268ef31f81697778937a9d77d4ccda3a561f39f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112080230.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/pS87VCopMi4nTKC0zjnd3p0QybMcphzKxhs4hpKnCZN7GpMAXemHgr1EXRKAwasB5l3/+1wo00Gu3VhF55Mfw==","shasum":"4d69b8237a1b936880423bee1d08695582784f6e","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112080230.1.tgz","fileCount":27,"unpackedSize":1855989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNZdCRA9TVsSAnZWagAAjYsQAKLDYskdvgfPCWgCXJwI\nPgD0o8XQCk/i0tt7Xvnh4ZiUGVrhKPwgyN8beXOswmKOGr00UKwkLeiXH5wI\na/ewJ8rtJItYtc3dnom8TBKtK7OkWLUyCRJasNiijj5gmABKhMDQU9T6DCoS\nCoO8xDGRMobfd4JGRkAiQBtclvu6jMfWJ8hI1s1RrF0iuBcH3FIdqYOS66b3\nJWtic3CVVyEsuMixIGP151e+mTR0+N/wUEYUU0A020Ut0SfQO7VRMX/V8noA\nv6YIGEqkbAhsRkf7yKZDY3uJTDbAgMYoKJGnldbjVjNAZL2C1cU8thAUMBkB\nYDJHbclR5dAnicg6REP9SXD8R4jHvQopc/1nlyMFrdhtbfWJwJqWpVcjQZAH\ny0hdWCzH0N4aY0Yy7HiAe0tM9hudi4dGJbm1ngXEvX0c8BVT8dF/kmwXcOyv\nWnHoPOVe+bluR9xVPt2y5AxDLbvxvPmdpPUUOot/dme9n9nu0VHvcukgyWe3\nPPhPM/KPCfuYNG27FMNJ8pNnNapWcNK1Mz4WeFoIR1HDxJXo1z1eRE+Y8fPb\ngkWdmehj3z2Yu0lZFk8A+qy0J2T7M9Fet9BNt6G3mTeCmUCSfo2k9iD85ro5\nbDq8mkn4tkIOWHbOp2gpwCzIMc9X7C2rozvtOvtoPw3+C+71C2x97eUj5cVb\nhUaZ\r\n=UlsF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6rPAouO4Qql5qafONU9PVV+2Ot9f+w8hCHoQDffYYjQIhAJqF7ehrcs5CxKEKCBmNiWk/iap/4Ea+4FvD5tjQBYEY"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112080230.1_1638979165051_0.10955125004526756"},"_hasShrinkwrap":false},"1.2112082232.0":{"name":"@bentoproject/soundcloud","version":"1.2112082232.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"b7b1a9f9f7f0773645f4fbcb9a550233900046a0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112082232.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Ne9soIjMjgEX78Bs5OYcy44oCNy2T8UbWHV7Y7xKBfhlCMAJzPbjh9SDoPD2zqSNzf5nrRhyN48FwGFAkkg3dg==","shasum":"47629f77ba84fe4fa3aedcdcf8c223284f698a74","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112082232.0.tgz","fileCount":27,"unpackedSize":1855989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfpeCRA9TVsSAnZWagAAIBYP/0pSBVXQ7MoByY5uDiUg\nBdkzaMkfRffsDPTTiwIQnydC9P8RJMqxP11Sb01IfIgbnaDoVNJ9yBkiLSEX\n8sYZgT4yCJn3EEBVJO4h21PTgk+/ed4qpaqWt4Dj5KR0OQNtSi5gGcqs/lXO\nmyLvt3MhVPdwS5izCJQeyAU0W57JxS0C1JuTFttee42r4MbK004FPYDPi8p3\nxb7wS3fxGNj8Iitwi19ELHNmiKSsHDUfD5sfmou7cIHMaoFU/L/2hdmbqaPg\nuAYO9nzVyJw5jy/fhUpM/v4Ft4dKgkiUFgycXGDxhE7x5UJXff/Os5fcTbS7\nVTWps9vThCWqxcYhvvuknHdbxefk80QlTJ6j+rZ2rqW88piOLkiVwbB+5kcF\nNK6TidTmPHgDJPiXLfJdt52o7LjV7+NNJUFnLnMmaViwQuoVh1UIPMD5KSYP\nax+lu3EKpOu0uXwDDxEFaM15jt0Ei29xywkYd2gRm3iYSlyQ9NYiEbATqRbt\n9S7qLXuVi/iV7da0oNK+nGMN5NWxv0dqY3M+XAWpl0wnxg0IWMPCuRZCs0BQ\nc884b8MKBljeBPxyXa+Q9/T3jqlM2TNXDULFfG2siVaElMmQ2ZABfAIwYA1C\nAHYxlxx6b/nKMEW0YDvgB7ixrMl3dIlu6ifTstsFJFkufu7g7eqeTht+yYRS\nJbxd\r\n=mwPy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMr37T8Gwgb3HvIVKbi45qBWSXCfBTusXaVMEFRHymnAiAKNsA0sWjwFwSsqOmqevSTZXu0HHSd5G+lZvQm1nrO5A=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112082232.0_1639053917864_0.6908607892445797"},"_hasShrinkwrap":false},"1.2111242025.1":{"name":"@bentoproject/soundcloud","version":"1.2111242025.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2111242025.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-OG+OOvW39buRLvjBPXrBETkg3GK2z7VJHY/GutuQnNQgbvxEQTiVne/YUkvbVuKR2Zs5metOaf0DJu2Ct3noZA==","shasum":"40bb168eb6e0cb6213a04ad679bcabd4bb3f29a8","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2111242025.1.tgz","fileCount":27,"unpackedSize":1837440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhspsdCRA9TVsSAnZWagAAdJwP/iFcMckMTMxD7PCn1mOO\nA7I84ZrVAIw4tE92ZWiJ5fUi/2cebZ3KVwGYQvIjy4N7fJCTMLX/+vecZaIB\ns0Iy95iBkuvS9atKmyB2dooVizBKD4N9tb1LtvdLv+LTW+/wosEMPdwMx5vg\nyHJyIQZHvTVUIW9j97diVgh8NFmuAt/KBLEilUHJNqZkAHhFppHgV4KtleAp\ntZcLvGMrRul2YvPMqLwxPbh9r6Ss+bVeE4K2EOt/YJ/QplrAz7hj24eqp4PI\nquvime9dVz5EswY3NkK/dLkWVh1Ww0eNZJh28cVERIVN1abOBgwM3Emggjwe\nZChglZ6fxyHxBnXDwHPA8qrTxj1CDQROhCxhwsx8EsMoGS0EVxWLJDcvGCuo\nPcFMZg9ftuiAFvpcd6YwbY/ZDhux36h6wL3DIe7ylhIrhjmoqrP6xNMLHTiL\nHql5SkzRG154QzNEcrbjmim0mw3d81I5UMDAhM3VZ6Y2UwqZWpLmEVOpRo4H\nrmK1MS3T+2cfhoAE2MNb0n5XKcQeZaOODphOIPbdMfn1pRn9eprmEiTvPdbp\nLfa92qgi4diKza1jCubhA6B8t2FLRSFur3LABsdCwITFSpno6M5yhUfcHT5P\nrK/s4gjNvtrvaLexc986EI2Fu01kB7AgvHUtohN1P3qeiuBWtQI9Hpbh4hu8\nyvUM\r\n=2L5g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBM6Ba/5uSkgvfpG/puHZJIf5e0U2ZePTRZHaJakq7F/AiBwlzr7u34gvUJArKkDf9atBpKCDJKX4IRVEf4lMPE6GA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2111242025.1_1639095069331_0.7080195452054705"},"_hasShrinkwrap":false},"1.2112091956.0":{"name":"@bentoproject/soundcloud","version":"1.2112091956.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112091956.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SVMD/y7Nh43vLWKaL5ab52cp47NhQ7jgXmm7y7i2+o0f5Qg9jt3acn8mBnuiKMKVdz6qZequh4Y9wRLZ212MTw==","shasum":"9a3cb8e058d4e4c9df49cc7cbdd08ed9648515b9","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112091956.0.tgz","fileCount":27,"unpackedSize":1837440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs0wPCRA9TVsSAnZWagAAIOgP/2tomBqLKMxGrP69Zzv4\nnKhb0FBG5Hj2LZpC7RbZ+Efs6QPG+/duAhFizwxvJrqGElgb/ZROCPuevuPA\nwwAEYzQGI2Wmdpe2JpKoh2bwmIXf3ooSXlBC+LNbKw/v698OTHYdRpCs7trX\nSDMOophZ/nPs8BAn85XbmJlyG5FeUbbgYi0rMYuRDGX22OkS+iiUFB2DcB72\nLsk+pBWD+mkFDj57fpPLHSzEAv90lbWNkAG1UuR8A0yGkwjR7Ad1IJO/4+1X\n9z/6emAiBrR/Lvp8uI+um9WokIS58E/W/Ugzsjoi9c/ZQ7fjoQO8bNkDPHgN\n4RgjGDaycdas4OQTy8sa3vfbwhbvFnvqbt3AR7WVu0tHgRFgWions52ftfBU\n/YswUb3NEutZhCDp3FQY7QmoDvy/lqf+gdD335B79Mr0sE66yXezObcbw/tw\nvsKkmHpwkq+EmJtMyzmNS9KOSLow4fA6aRdGDRNbufwTwfyZJ2orPwLy4sos\nPzffJ6ztpOkrefyfuii/zwOz8QCSyq1Idok17aKT0Uzqq5zH7cEPWqYGrwYm\nysa5lTmP9fS4H/GXRP0Zs7zkHTABX4WG9kGXCAj8QsF4ocCma0KXNw49sS19\nKyun2491Fy3+vbucnXghUo29Mm72bIIDdY93bEhIFQWoYCSL6MY/ep8w7WHE\nrPcI\r\n=+zSH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg9nx3n90esiv549n0Q3TRoOoM8bl8yPduG0o3EwfubgIgZMwHTgOgOoypEbgpjBINJM/NFQGnZYDusahiEn7WzIY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112091956.0_1639140367383_0.9295890869230885"},"_hasShrinkwrap":false},"1.2112102136.0":{"name":"@bentoproject/soundcloud","version":"1.2112102136.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"07236921f8e25ede71217e1921f8aac93c30ab6b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112102136.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-EXM9cd64R+sJhvlUktjvQ5Vyvanc2W2IKTHgC9PgAQg0te4TcVKX/D7LxnfkfuYLL+brnHPvj3ZHCGx69A2BSQ==","shasum":"983aaffb514793829be90a7c14ae187d32c1f035","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112102136.0.tgz","fileCount":27,"unpackedSize":1848566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtJocCRA9TVsSAnZWagAA1tkP/0bSoLeASF3NxBcwAhPK\nE9cxfezPa5REx3leTw38kgNqjCSvZ3GV5qUqq8YQm+YFpf4DOMupCEieuAZ3\nfESsv0n3OHCVTF4KNPEXmbI3xe5V0Iiy4bGsmDArYvwE0G/RpB/dkDHO+cl+\nVSw0KUP/QRrQxr/lkv/zI4BDv10UcX2uqdwhOJfFZz3bwBGe9q+QSiCCraka\nHfaDwYb/JgoQ61T8oRr68NjXeF6prv4kHa1GUhRrln8HzFttKGM/DV2rMhoH\nFGPhwCtCyGdWl0Hf0NLvpSI5t84s8s6gmdDT4xmlqR6oTnW9ecu4kre/RiuV\nVqywnC8SMEyKNtlgjQYVGYd0Aza4NDwSAB18ESFH0YpEHnVoQm3xnBGX3Ktt\nrp5JTxW5W4NzmkWxDlwdsH/YaBUimU9m+orzbWoXp/vXdhqh0iMR2jwNxqXZ\nnrlRYb5TpiABFrkFgCfYPUlQe49gfN6odrj1KE/Iy8AuOo9QkicJgaDssZGz\n07HQ/sh1+8hZVdLQbrekxrFiafXNnFMseDYovPKG1V4heUl1jqiO8w6CWNmh\n4rueNv6Hp/AasctMIE/VKOTaUuYgZnR34vv+RO6Qdxz48gJLXU9aiAfGfjOa\nF9+BZmMmr0maPyAiskgiGTkbnyTR0w5vZKBrOEh1OgucDTM6L4oqtmXgtbhu\n0iYY\r\n=G4c/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9+3bh38dwHVg6KLLONY5rjBMkijak2m65CKMzO2FUNAiAa/lNutv/BNOPILh4lORQCCxZrDwlr/44Bvu1Z/PTrsA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112102136.0_1639225884794_0.7748720930808772"},"_hasShrinkwrap":false},"1.2112132331.0":{"name":"@bentoproject/soundcloud","version":"1.2112132331.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"cf62ae1d6a12b70dfb6a7bd8ce66ed5bc6e30d1b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112132331.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-N+Vhbzo+cBbm0Bqo1PkYigW77NtxlBT9CX8K8eZNxygCgKeKy4pV+F6eNbY/15IUy05cMHA5HgNkFouq9Vgn5g==","shasum":"b675f43ea33b38d8a75d3a9cec84bbb92f64d009","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112132331.0.tgz","fileCount":27,"unpackedSize":1846272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJU2CRA9TVsSAnZWagAAeZQP/3XiFNfwg8cq0fSc0EXd\n2MH2oZ+ddGGC+OOuLFVfEz+OgQMGbgOogLFW9+/F0WcszJ/oMdEL5LCg5XuQ\nnpXcbw4kerk2uxM1wODBQkqhHf2atdR9KqmcFXHdkQcKdEdBhpYgNKrQBkxO\nyp9vTrCgKJX0P/fd8u+Syqnz1tgAbjE7KKQFnqqQflYjuyM71axFs4JGa4FO\nNRt3mfsLobg9ITpKw228ftvSMb8QXSe/COo8qcwpDM1bYetFFCSU89NliMyL\ndcqBSQLGQI9tSa8JKcL2Sr6qEPGevkbOGgq7bpWmb27FhJfSLsYnm9qO/MDV\nO/tNjFAMKDKITzQEERMOGLJUB1tiDvakQ4eQEpVHMtHTEN+2UNxn6dsKHc1j\n2t4hk74MZvHKlkB1bwrLTXUnFBPvU0A8ELFSSad55HgYSNIRO3z29vZJIdw+\nBUExWy4XJanGy1rtNsrl9cbZfAWvx+AdFawU/m9kRxSqJ/Yfynjid5f8LoMn\nwiAq8ZEd3SvmowqM8ZwDLQmrgju/fTCQtVMVnuHPrMLYoUjhbyPvD9UbfWu2\nhlczUitAFk0DrWMTQsVyQJ4y+4UxXfrqmv9IN3qHi6brSKGcvM1c1loFMnvL\nFz/4nbUBdRAmTrWOE+gPeq+t1FY/Yhy7AHGkbugAeu140eHqaJ9Yq6XOOKrO\nNngD\r\n=yrTO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBDYfWyaAoWBWWsviTK/HzZ7m/Hgl8rbEdrfJORVL+yFAiEAvfc24G/j12DnjV9Iiv0yBxN9FyYPDX4JJo+5out9OQs="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112132331.0_1639486774514_0.25752308943003266"},"_hasShrinkwrap":false},"1.2112160003.0":{"name":"@bentoproject/soundcloud","version":"1.2112160003.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"2bfd164830b15f49d7d86cf73821410a039d9039","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112160003.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-fYeO1uBEBiUMFvXgk2FGbRp5l8X3grd+VUBGxTNWVEEpICeIjTtDyzOcdqOAHTW1QSc0HSerVH3FDnGzRKQk1w==","shasum":"a94ba236fc7a718e185428a3ba6dd531c53fb7d2","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112160003.0.tgz","fileCount":27,"unpackedSize":1846272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuy7gCRA9TVsSAnZWagAAEPoP/0y8+Xf7/QDk3NZ39QtX\nv74JBYI0AI8VZkzwr5fU8yvL4qCSEtG2NLADdiyP7rBucCbwILOIsq8oaZng\nni7rAhoDyWiudFfMUXMERAMI+/mTSBIB3mGL+EbBEql6JpDTh96wrjAW9Ouc\njP2KczS+n2qRx8sktnqLMWIXHNFG0Z2D4pYm7ANI0KD5NbUl0FdznkYYqbbV\n3/fm+O7Ie2m77XG2jjgi4hy8vCwG/xB3MTUzxnhJSypXGrltKaG9zP1SpKpb\n5TLYEsjlR5caEH68VQ2iALa2hdYLPnXlIbrYhxVov69NB5tgEt3BpVtfjZ5J\n0XXf4+g+lgWw/x0pBQJ09M5f8lx8YpMzoroG7Sz0c3omo2zDh+EqR+SsJHDU\nyD+yyoVWZus1lwKfOfAh/uZ5PhVy1TyHZDCes6RvGUFN6Y88/xQzeRA7I+6B\nDoIrYpjAZCEGyQOXgWc/AKDnofGI0JO5XO96oUQUUraaibNY3iyEnHfy890s\nX/lIbyU8E1SHeFkVKukrmJmSK1Z9eNbhYeLqPWkY4KI4eTCILL9ZiEC5ymV6\nadWSnr6WZhWCWwMQPDz4gW6xCw2v1GOeCMH/ENN288MS+2Klm3L8jC9IWwg8\n+eY4J42i/mSBfheKu4Xua0ePdiwPBkARXkH0zoNkJ//8X9V5SE0CRXT+AvjP\nHUGl\r\n=+xcW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEkmcO0LZWdF+CFcq64bsjuF1b70XZnT+4v6M/4/cFlwIgBl4hXm7lrar3RNlPTXuHC7314J9eToj/OQzmw2N7sJI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112160003.0_1639657184216_0.9685004812771314"},"_hasShrinkwrap":false},"1.2112162055.0":{"name":"@bentoproject/soundcloud","version":"1.2112162055.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"e3242ec094a87348831cbdd342f5187068444994","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112162055.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-4FJmzDmq2istSIvKIzjYGzdYuPUttu7OefVKPfjwGdui4I+iVXa6gGGuGzpaAamO4NKg1SLca4+oXz1/MUuBHg==","shasum":"5b1c02ba7a7648d8f26e7708e742d5a75977f1e5","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112162055.0.tgz","fileCount":27,"unpackedSize":1846176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvIAJCRA9TVsSAnZWagAA6/AP/RiDqM9hwcsrxziyQ4nk\nYY7f/qI/jeTYdq9+dFpIdaAEGYzFLxR9XYtXZItMQ11HsPYweFhsC+W/OEYP\nlKMh5VPejoxpETlBULM+/u+TZ9iZb7SghvKTi/4b/tMTk+yT+jeSH8vYj11H\nWAbNXmXj4fuCSeHZrM2p4qZWAOH/MFCy/ASc9DukSCKKzTHY95KJk2GbPbL2\nOG06BsK2aa0H29XzK19Dwombqnk+WCN8+IgmYrx7S+C6a/DY0jZ5A4Lgc5n1\n7V1bBbRf18T1OlsBUDosjyzlvodhCLB+nb3UjRSZBtK7yMkvljOPQvF68l2m\nfrLCcvgQikxTHoK54pghU4stPfXy5n9131pDBA4rQ7LFgO9A0YXr5cR3fmRm\nFM+wOULxfZ0nriaQzUoVhdcq9vCvjxtK+3HkAkjFvl7TmcrvJo8dcrEv3f27\nXjQw0WijTHRuECOn4x8WPJBN11Y5nqrkO8e0ZkcnLyxTorixWKie8GkUI+kb\n4tHZtjGubns2COLc2nulkEXgGyfzzzvPq9d7NMLrt0/z8IioU1H+n4mDj42n\n+HJaEM0CTn7PYnzbBOphll3pZowYCm2h7h6s4GPNHq3oEKWK4K4Hn8xZYpJt\nq25oxq8HEffVzy1lKqJweHHEb7sHxA2tMHLgUKbopk+o8ohYxnMgJaWI9rgH\nELtq\r\n=eOFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGQRFGMvY5VTH24heODXVdj6UugxUr2spUbFR6osuMRAiAyAslFCnZlbmrdL85ekyTDHAIiUGAGh/atuDxaKtclrg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112162055.0_1639743497613_0.9640542202729361"},"_hasShrinkwrap":false},"1.2112170012.0":{"name":"@bentoproject/soundcloud","version":"1.2112170012.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"38e50237c04e29792bd0ccfdc13308940a873817","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112170012.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-6oEhh1APgEwQkYLLz/dn7AT9C2i/xd77YQTIEJL9HLHWaj6WjqXw/GWDX5ZMGWE0Dqul7lEfbxhgDdOxDq0OOw==","shasum":"16b86679938fabe9c0f4a1247c0a160573cbb28f","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112170012.0.tgz","fileCount":27,"unpackedSize":1846176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvdFoCRA9TVsSAnZWagAApAYP/37HavOYghbdoCNm3OL9\noIhxS8QNe04Vp9Hy4AP1QAq6TK5dZ7y52KELn6BT7S3qgzgB9+0CwQPnABAI\nDYQpcL4vek7yEzyFxD2/9b41y2RSkBfmYmYz6ZCDNT5CChf/xaphqrz+kruA\nzAQkbEL1i7BNtsUaLYuusKnB8OXmeJQ4mavKCYprU/wwDK07gQZ0n8jtrHA7\nNPNFjowWrj5IUQdiv4u8r+XM0njt+hqmvJFsjYO47og1ONMMDrOGHAmdCiR9\nv6wXkVgLZITQzVs6f63forwlIDnMp4otNWIx/hOgpVqGxSFy6Dk286BVjXlv\nBu3upyqrjScBRVJjchKAbvGjRzS/g0fGq9Dpl57LtZcWK3p3TLM3bNKh8+8Y\nprIuS3rz/Y1TYYlpDAORZV8HCi73vL8j3o7LljOhhcfO43E64eOi9SX6JK0T\nccVr/2xGWY33DHbTJetUJZ/WE5xUXNvNmxJS74xfCzqmx/q+7opwgH0Nsh9G\nCkLG8wrh2Pecd1PUyxvd7a2mv2PD2R9Fr2DbbP0e2A8C8uX+KzL6PnTDAwDw\nZbJMOCZBf4iz5b336QvinFgFx4PUiwDjKRip8y+9A1ig1DBxlIJ1kpnWCFGh\nJ5rF6HLTzZ1y7Yqu+kD+5k4DZufbbAKu980DRUxrd+gmqF8WfuL/1U8HimuQ\nwlRk\r\n=oS92\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVCLLT0srVG2OjWSVQNCE5ZsqcT6RFsgPkzPQCK/FgEQIhAJ18hyqyAMS3f/sSxSvU/HI97bN4AeeD7dShPVdKxS6u"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112170012.0_1639829863927_0.2777362505506489"},"_hasShrinkwrap":false},"1.2112201724.0":{"name":"@bentoproject/soundcloud","version":"1.2112201724.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"a8be9d1eaab4dcebc8c170c9911acf0c8a5e73c1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112201724.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-/tkaYXltfkbsTccnvS/XVVTUfwsZX3uUotewNJ7z6bBnsS3y7XZqqu3R+b9NgMBfQCV8fi2fe0x/TvoC5CNTcg==","shasum":"cf9e937532da83fe32a1187fd287f291a6f524aa","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112201724.0.tgz","fileCount":27,"unpackedSize":1846176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwcbaCRA9TVsSAnZWagAAUccP/AtoA5GzatEfxJ/v191Y\nOrp2mHAklax1piA4cAgaCx2XMNXLsPCHJv+LneQcWdG4NWR3AaSYnMugcO6Q\nA3UOlnbgRYaq+xaMkcdTgnB5g3yTR9EmtkxALIsJzgWD2ZLWsTJxAOXWCSU/\nITbpnRJBn1GeGuY+SsVyEtq/8PtyyNkYroK/tK8deZEUOnSvMt5JIgw7F95n\nPebimMjGmUH8cJF3ZHV3C/OApBvP6en0dK9mgaR8CBoBBBiPbZCR2OLYSjJl\n5JnKllx/bZp9acktrArPlUotMsnndQxnN8yCikF2NFKgKZTU8gfcmIwCzjg9\nmQNH42p57sl2ce7NjlYJI6bxI4wmSmDz80lmoD29yYffxPJ43g+M2oAILegT\ng4wuOMKLpt/rumnPHaw146mhyIFb9XmQkcpKgglpANolN2Jc8oFKMkHUnUIY\nm4F8iZ1fqurU9l/Wv6CTpFVEl1Urj9haUvU8HVW403a0VV1k58upY70iVSUY\nCo04cIbxoTiJ9qCgfcSbC3MX8EIbgz3Kz3JcEyhur4N8d2wFrisyNnaXs+sy\nWaDvIQUaHQEu5z+SRf+jm3K5EYkDRfxt3LakAK6JWJzko1yBnOz1hLHAovsZ\nxX+qUFzCtwo8JHMCQRZU76b6VSSG3by1SvccVREcWiAY5vRA8OoKSKDyVLSF\na2FP\r\n=ULbd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGB97RUEe4OMvZMRnPIjq5+PTSsNPLJUooBYe98xi51YAiEA0Hr2bO+1RhviO3z1+FilelwKGv903730LdGPzGUwPmQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112201724.0_1640089306365_0.1774615855118291"},"_hasShrinkwrap":false},"1.2112212349.0":{"name":"@bentoproject/soundcloud","version":"1.2112212349.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"a6b6a6c259283b2cfcfb474966602c2ada072484","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112212349.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-5AKb0JRek4OzECodzH1z33EWgje7JpCgNlSE3h7Fezd1zZ3Blp+zbdxzIn+uKr+nFdIF8n3Qp61ErtLsX15emQ==","shasum":"60ef8ca50f16c91fad21fcebc406a6b4874df888","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112212349.0.tgz","fileCount":27,"unpackedSize":1846176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxjPCRA9TVsSAnZWagAA+tgP/R9AafyEZT+seEmkQyXe\n3fd2vijN+TCNerZExIJNuqS95eniU066r50WsxanGjqXuI/VJ5hlyX02Nvj/\nEZZTu4n5kbPG6kKdTPsbAvhWJsUdWU7NH9ZuajJF4l2EnJ5bfD7fHSyAoo6P\nJH/Q6ZFcKvdtuZUTLU9bmLGaadJ+pB/z5uLjWtxLRlYZ9XA4F3ySiC3cvn6K\npOQVAkBSSziOYWZM9RJBKZvQZBhsZhMaXL4IRF5OV82IUDnDevcO+ErOEVIZ\nhcxnSYVQuP3bWrnwn7nIzF9Xqj3RjO+v1b+OtDheONvkCmWBvl5zN1ZypGs7\nXTkWre3xjWIc2cfwcBYBeaIx27LS6ukjGGnnd1hG5vWTftBrIz0clIXyw3x4\n7cKk5Iq2ldzzoJ11DXCaz1lVOQZW0FJKtWFNn7kk0hXAZ1RuJ6jeNEeyIYOH\nNVpabupa2GaTFXAyslOu2m8/SoSg6b4+E3WD4gGqfZmOeYsDmEpJ+eFOdidX\nCCOmvRyEQsViL2Y9VFqtUUujMZ45XrHcgt/VP6TeLhvFLc28hqrRB/QMmtqd\na0lWDaCT1i0T0wsC9nkVHmpPtDRs5IQ1fplFASrrQElbY+jQPf1+gpsTGq0d\nMJSGts2nrjtmqsvMpkVKa6iKf9N8pT18B4kot6XLebj2La8iEKNRLm7XOp3x\nPevy\r\n=jOYT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcflyclzYfY/EZjmjG4Mh9+tW//83q6rZgYMIMa1kwnAIgcxgeIHxph+GDx+kpyKbHx/7nxH+2cLrvJA+oCDuahu0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112212349.0_1640175823572_0.28115635526090865"},"_hasShrinkwrap":false},"1.2112221739.0":{"name":"@bentoproject/soundcloud","version":"1.2112221739.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"5d282652a97695e5ec57a655f76c0cb6d40de066","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112221739.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-6+UiShi2339TboATIz/Q1Xd1QkjoLuuZdEnVTk9nu6td3gnsGC78sz2PCqFsmiQ4bDuXi6NdFzZlnc5/hXe6fA==","shasum":"244c9aaf993acb2c7067ceaa2dda5dd9c1bdcb6c","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112221739.0.tgz","fileCount":27,"unpackedSize":1846176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxGkmCRA9TVsSAnZWagAAY3oQAJmUzBUaJoFg0wGsl8gY\nCysJAO28JrmEiUl+Ap2BuF8uA5JH85aR+IjAA6KMZ6zXrgYW6luXZndAoD9w\nGAIaPK/xOPBuOUTJQ/W2yqy697RwcWuB7l+uQBF620xuLoSZD6hkWnrimXyP\nLb9gpZ2yCZPT1VVrFc0oVwZTbbDgcDZ5GLBSHTCYOVVemYwLty5tYN4l2ykn\nsjdXcWhMM9vaJB/uR9qTO/KimtZ5/9iusY9W63IgcPM6fu4JKVc6YWIcQqGA\nJndv8iJmfoy+oFwYfHR0gL8aYeGfK35Pz9M7ISFnBNNlhu60CaKAv3NoPAsc\nihbDKBORmpa3GTflUF1Hz4B41GimOYnMF4NJcB0sGXh+KsBMwxt4EMzJwIlK\n0EBmsz7Jd3QkS9fZFeZrrzk72LVa5nH+KwRrJhw1QpLMifjU1uRJzqcib/RD\ntgS/J45HZQNSbZvc8QSvbbanK4H9mQzvh++HkFwcbUYSAVPBYzyANVMRF0r/\nXqg49nSS9gDzU5/kYiCV/2xUvMftNA1D5+xw6sg/R828G78dND8WVEXv5Lzl\nq+J+lIRl90B7dLiwpanUntVqK7EJi6uzgVxMaDw1XZ1aWo7PBL4fdHjvN2V9\nGOgjY5R0cSrxsz+W+qNnkBjHsJf9XiUOn7He2n19igVZKj9zH89ROc5DK1if\nvlFV\r\n=OpC/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhcguHFY8Xj5gXKyTZvlXn6lwA6sE3Sc155lRCnytizAiEAoC9xe/yeflmwu5jrvZr4k6QmjprX7GwUBUxUQXGi4oo="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112221739.0_1640261926711_0.8095661094375577"},"_hasShrinkwrap":false},"1.2112231523.0":{"name":"@bentoproject/soundcloud","version":"1.2112231523.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"3d06e61b6949affa49fa2c89bd550777f0fc8c3a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112231523.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7cO2bP1VOqxdC8x8ovt+fvLcLftz53Mr5pxy01wL3NBijhre/TiDWQgbr2eSi6Y1bcgvPvoExWh6q24D6VHvsA==","shasum":"b3730f92bdf12bfc99b5414c8ab6490657b35b06","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112231523.0.tgz","fileCount":27,"unpackedSize":1846176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxbsbCRA9TVsSAnZWagAAV7EQAJ69WXZZGu5SpIrxss+d\nJmtmN6fjYKR57mSuPGssdAQzNrHjZmhi3df/xXGG4DBEKogOAbnwKnsVz5sa\nf2lVRzblibElDDnNHWl6/MfpDK5lNwbYe9VvaiVFZ7TaN/6H+jjZMMUKK4MV\nC4xSlOJ15PJ1MxciRpIeMOuhKGGaCodFvwvxY0JgArPJflTfAE+tXoKAixWU\nBaUOh82MzPUewWx4Jefs1vbhWWVRM0gV2fL7tNsahG6XgLfMXtL98UBRJMTi\nXfDytQplrHwxYt0H9eObMynSlT23wUeGPXi0wxeljy0BFXmhicST/XbLOZkq\nNqc85i9V0D0g7nLP8OHcy1gzy9K97qxlVHrYoLFlwJNlcHRRzv7iZEp+pTTi\nR8ctKye+duKgXlECn4icLk+izsxSktFHY5LqbrwWnJZ9HxrAUny2Frstzrb4\npM7TljBQQGwARrcOibM2jnkmLnl67ZrCIIm+FsZbjEBGpG3orYHRdNuG4eDs\nvqfDfk/JTC26o57xKqgZkMQro8mN3/cqJ9/Q9un5kQse+mMJVJn5LYva7Sut\n9/qVYzJtPNgQKY+gbXt7GddPoYitgQBQ6Op2SzZFu/MFnsrD/tXvABrj5jLG\ncUVWKXwkitVt+oWTgnpl5WBJJSGJpQguorcvoR7MZ0FQeai1KsPzg4DfgAqg\ns9I4\r\n=NCd9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRuMJ7rl3rYB07fXA2ti6Njx2j84zzCv7EIZo71OGX7AiAUF4bztl+JrrQE0wO/+AACZYhNJKx4NY/yCP55SqSSmg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112231523.0_1640348443592_0.5729127452010434"},"_hasShrinkwrap":false},"1.2201042109.0":{"name":"@bentoproject/soundcloud","version":"1.2201042109.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"9526fe41f7489e55b2e2a8bf52d6b0e4367e19e8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201042109.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-8wqgb9G4SEB1X3BcDzR3pVnRm7pM9HVWeUCzHG9/MBDcQy/5tEn0Dfg/1OOMQ8C8EZX9B+xhFmvgeKgBN6FgAg==","shasum":"6d4a67a0d69dcb2f5d213204dc41fc1e6a9c541a","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201042109.0.tgz","fileCount":27,"unpackedSize":1817710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Y+aCRA9TVsSAnZWagAAb64QAJPHgAibwIK+Ylf8h6Rj\nwaAcrKrACnGeyqhgDuAKVVtvWpesWJYBd9egSJVcV4udBzhIisaY754PN8NM\nS0X9Gdw6ndYsPNdMiG1ERQi+w4/aAJGkj032yTPRcN6pmmbEFuCHGtK5EIJk\nxB1wVT12tVwy54ojRlfOaA69ffXmJecJ8ulKsO8Mz9czw3PmRyraHpp5cFtO\nX3Te1iNGnNOPMLN/+9EXmcxjnGo3amIBr7Dz3E0Te5rcYsSzdM+FUywq0fwp\ndH5fKdyb6zo/xImocxQvQRTbo7l/XSCyysmVCzaJGyzwiGT6yMcmqqPyHKqN\nld5kFdYSc+QyTYM5cAWYC2VtUCNRD+0aD75PDIczDVSSWlu7APoe1ML5OHxn\nHHltly+kKKoWkqdN9w2jHfpAkQZYDqZxYYvycCLGYc0KeXwAwsCo4E4hVrJv\nDMplgKpgnIf+Lf4yXsqwRNQey4cw/wnmIAZKYc4/PITL9wS8hKqMSNIHIRC6\n07oMlInagmzYxiWA7t9yhA7ogLcKSJT2DnxyKiSHy3CQ7T9n30vJbR6sSHCo\nbAhURDa9KKbp6obRsxwlfwFzrBP8adK0NiOpGvY1tyo8qxkov0szGVPBLA/j\nTjegjDx8Mdd5sIk4K4CojF+3i3G3HvkdAtooiPR/NmhRnKe/SKoq7b8JjZTv\n4c31\r\n=+YbR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaGX3l1T5AEJHRbV2STxq0BZZ1SVxQwmVRT0ZFjoY4pAiAG2P6pcbdaeqQG5v7UeHaK3xbPXTvJVeu5w1y/sAvj2Q=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201042109.0_1641385881994_0.2803622980871423"},"_hasShrinkwrap":false},"1.2201052144.0":{"name":"@bentoproject/soundcloud","version":"1.2201052144.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"09cb7c2c04a007089967ccf35accd80cfaff0c83","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201052144.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-9gftNrLrIsxulHW260ZDI+8x/ZsZllUz6W1Nd2oCwl3cvZP3DhO581JUegLR19/Tmu1h+Ng9oDxXlt7v0JvKbw==","shasum":"9e94c0567bf6e307ab8cadb1d4e93683f867d419","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201052144.0.tgz","fileCount":27,"unpackedSize":1817710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1uNzCRA9TVsSAnZWagAAsi8P/3aDm5i6idOk7jcEmUvg\nYZ2BZDtzkGDoF6aNlJSv8nB1JTs3GDpgnOnuyRVVNXtL0fKUnsYwXkdRgoJo\n2OCacqSO9QDuGX8E+Kczltewn8GgmRP7jDcw1DI3h7guHjWSEo2MKjDB4TNV\nZwUJhlvjhEk5H2qdrphmo9PSCT6knxPnQI3P4qByYOun13Sy2TfEqQnfsz/x\nnZzlxlwYNgCAMfOJawVAgbs9GsfFhREXo9+F2GBvpo4Wgr8iVl04A1HCNAD9\nK8RxJ3ufdFr9e/B6q61h63q1HgvwSiNwIZ5mEWFQutPpsFrn/r7bKrz5OdG6\nC4xHSxYzwmpVu0TvHI1uXJhGJGOHnK1UqBpLrKaEFuSPPd8qTY8Bvu81hWpu\nBFYLSYrHkDziZqmTZwuqtVtWlUmplgP5rrDci+BbrYipD1ElL7nk2ps5a2Yg\nYtodIQD45ZumNy/ua/dsxxDDnV4kOiMdPpSCamlH/tRskUiCMuUbUZE2y88R\nvkNpbaALuFiVyv6pZf30EfWxCGyBjLSnaF5gJ4Gfon8TQvmztdtERer5U37o\nQdJIEgJbL3OV0Eqc32f7fpuBUuhZmVPgqjV3AZImVJ5yKbtoNzRxmbOBz9Bn\nlKevdaf0zPYzA3wprtOyGwc4l7Rk75m0ZSmkg5Mxw7boIrLgxV99mRNdhH4o\nGhNi\r\n=CrQy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFdqSEimySAuVk+W//EbGTtWhhQAgrymu3QE8tXnyvBxAiEA+IamfNGxykIHG0zroMbcRQqP9NPsHuYo6av3l8mc464="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201052144.0_1641472883373_0.33409032108520575"},"_hasShrinkwrap":false},"1.2201061922.0":{"name":"@bentoproject/soundcloud","version":"1.2201061922.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"737b882748278c09f4270720744c1618e36be6ba","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201061922.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-N5Bz7VA/7DStOKHhqTVoC+Zw1VP6GT/c6CWtQ8VVzc/SpJ3bJnF65ZoLqTx4vT28gVo5DNzIHIsbzBbzwcBNsg==","shasum":"f0ec26b94e2aabe91dc006833823b639798c7264","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201061922.0.tgz","fileCount":27,"unpackedSize":869776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DLfCRA9TVsSAnZWagAAlloP/jn/FzWSJXuyfZtCIQ02\n53U7hlPpHSSYJFo42dQt96fRSt02LEnXsT7bp70p99J9xWy4VLcsWVQpazdo\nepH8HCEPk1y7MmieaC41D3uFATd91klFk317hIqkKOqLyW9OunlBjjl4Dgrp\nW6Ot6GyMvOSolm7FbDbmsTSZcbbktfd6aWO9WakNkXbcUaeI6p6obo4MEE9h\nL6fCGjMlIykKsnjvW3vyjkoaBrY050wk5W/prqTPEeGhD5OenkNuz6v1LBlh\nU55Q6nQG8t2Wkw0CQu5z9SQLkALVpKDgTNvA3/WswjzotV7BH8Dheipve+/L\nvonegNrS0Je1y71+Itut5HBD/89de0xYCZBoKnhMl08/lwi2ugC/PyTafvJA\noiVWbzHUNNs8DD99shUSDyIlpM+o4Q4hd9ZLg0QKGko/5ktWFXHRrGu6qcsa\nbT4zrgKcJHtm6aN7IGtSgk6bOFupSPjA9yI3QPQykwrj2A+KbZCJLJie5NyF\nTPBJuZB27xbvz8YHe6Ai3JHt7X8sHMlrFf2TguEIil6vySYhX8r9Ut+v7yOl\n4rc8mYIWCe5MLOPg3VZE3P1UATWd5Y467438mM0Anui/ZQzpYjO2av1aR9aH\nGNvfq3zGgf48e4vZw8L6uUgTeO+X+DE+OCZLLqIQqa1kSWknp2teJr6jNDwl\nCWzE\r\n=7OaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmS4PEPTt9+I8TBKsNgbdHrdHyP5roYNRugwFBgl5QKAIhAN6gazl7Nld7zHM+t8CwyqTXP/ODp6AS+rujntGwFPJq"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201061922.0_1641558751108_0.20873118498124543"},"_hasShrinkwrap":false},"1.2201071715.0":{"name":"@bentoproject/soundcloud","version":"1.2201071715.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"e40a24fdddceb1c635f67571d9cf513c7e58800e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201071715.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-gv8UN3+XJp6M/zPw4qzAKuw7E5vajCZUexLZ7PS9jKQOk1VdciBTaAMdNG69DPcM5As/V6+wWGoNo3pzPrOL4g==","shasum":"cd2450f5fb91cf6fa71ae28d18c2ef922a2da5ba","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201071715.0.tgz","fileCount":27,"unpackedSize":869776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2YHmCRA9TVsSAnZWagAASaoQAJ4RJyD1rO2bjOrsM9uv\nI+4fW7KmzwCdA+qIURA2e/ywV1ipsEzSZtP5+eTF0zb4Yt0CnP+1YoKLdby/\nSOgYDowPFEr0/etPKYVkhy5vQ2KApZoMHHCpDGMCKLp0Dr0Z9lJDcrsCaGEA\n3riCGUfsQZle+bf3L1VYmzsDVA8Lq/xg+7pOUkydjTyJCJltbrnEZ/VA+hhE\n0nnhm0jCq4aG/8aUPZEQfx/tvA9wGi22kFLyBXHVIJzCXHm3qz/Vp2dkutFp\n1SLhYmE0YExLMWgFCETZnsIyMF+eQ6mSLuVQQnMEfLBZ13EvhU6W1KXksbJG\nT2965YEuqXvx1eDJmWcaktD7YRRKq/KVOjCTQ5rw0EMKd2Ricdjm152+EEkY\nOZYsq6/MWDL8w4bMaKfD7TgDtRWQ5CSQQcWT3jPA/lAHmr8r9i8WWEI7c6eN\nFAqn45DzI0hg0+VVCqVRlIszv7wFT8+UhSQ9J7TrA3HX2Q3fZVq2nQxfcMnV\nloXcCYwXO2d7l8BXDBtF1LY5sJ7jRblAp5CMJPRH8udQAbBTQzVq2KWstCED\n9+JAYlmA/nFmAwW0mBICC1lqEErHKahmFejf8+vFCIOdyAu9v4IrEHIERhHK\nCw2TGtzpw3Ui58tV1qrXQAAz8pj7N7sv8rTBNjHVQTuFvc9uc/qlm/pqU6U3\nzx4Z\r\n=dXEV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyeR+bVkCEs6jcyot84jnFLlJPCQMSJuLH0nAHa8tJJgIhAKn248M9++XXNcMYilXYn6xy+t4M3EfzBGZgy9xK380F"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201071715.0_1641644518731_0.3056798823197566"},"_hasShrinkwrap":false},"1.2201101902.0":{"name":"@bentoproject/soundcloud","version":"1.2201101902.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"f0b7ffe685c60b51cfbab92bada4e0c87e0377a1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201101902.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-yhXpKY6mvj3FjylqEw8K1v5tZYAKj+DpQqexz9yV/Cak/X1pI9dCpZ+LMl1QHsGawig6tGvfQHNOLLYb9F1IZA==","shasum":"2d5fcc4149f2d2d84343d64f9cf10a5bcef5ff1b","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201101902.0.tgz","fileCount":27,"unpackedSize":869776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3XgyCRA9TVsSAnZWagAAaQsP/275lM9CGY+/2PJLicfd\nAKV2h/DKuBzHUSwLocmuwi0QYPM5ZuynT7l8fYgLDKLQm7bG7iCXXJsxWrUc\nHYhRiGIlzXxPTtbTQJEGjYFp2eb9l5k+7U6Wx3N1MReTNA0c6dH3BkV0qHTB\n9WlOXkk2KNSV/r3B/Y4J+7191vA/99wOjyrf0Lfnx2+bP2lXsZ4q+CqKqbgv\nioEeq5Mp4Q/O4iEq31+ZWDTqPIcPoqAzqauNdBcS/laZI75XnOAWpVToqBOn\nT17/hGw4fpgVOsbp8YrzuCp+/XtbQa5HXjLrzRqFyhQQZNrxgAQ1udMSboL/\nIskD89J+ONg1plR/LE8AND1cjkmMgP7t96F4/y4Hw9pV4mUiKnfKtl5WxqQv\niJU3z1rqsPTACnl+8+spw/5iAbNthzgKGrIPlhDyOgH2jq34opdVZK1qC2wZ\njdEyAMVUOZ00fHyXoDdikrF4ry7fPNIZN0xFiduaNsIpnJzw2/PGlRP+LIpU\nDj2El0z49XnWot1esLSWssym3jOu3hSXDV6fFI3xKkDevZFP3j99roGjI2Cs\nTfCaJLZoL/NwiSNasyGH334j0PYgnNofoK16cPUwq71owaM+/EuCD2KKrszE\nSZJ74cynUcKuCupdikGIZhEsUWWJ/2CsFheKvFMUNah0sFcJOygxwm4UMg7b\noN5p\r\n=CATw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBK183bS9q3c5x2yTInhF0U6QF0h2Y9rog7uwewfo5mSAiEAvHJqKrZ7HN9hQxlq5GF8ZcaFDUho+jbdR/aR8beLraA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201101902.0_1641904178596_0.41744195307361665"},"_hasShrinkwrap":false},"1.2112231523.1":{"name":"@bentoproject/soundcloud","version":"1.2112231523.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1ba2e6854831868cfbd5aecf8a74b09bb0fbc2ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112231523.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-c+gNC40miPVLpY/8zm4vUG2Qd6nna6HU90Y6yU03AKb9aItw7jTTtUlREge4KKwhShdgEu0zwt1MfB1x1cTuog==","shasum":"b4e98c59b918728be9e55845d4152d7040bad6ab","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112231523.1.tgz","fileCount":27,"unpackedSize":869776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3doGCRA9TVsSAnZWagAAOeQQAIJf6U1H/5BHv6ycxNL1\npYTsFLLZdu0SIRQOTYbpmAenkA9Mg3Sjemkh+cdVgZU1xBpYbhTjM1yJPKuP\nv/8UO2mrNCqErgAcGJkB0TrmoMfNY+hwNPdaye1VXSM8zWdk4RQlKeiOhuEt\nDGuujerIqNyaXmRWMoA8HdmM4n07fWFYQKFX2GybaMYBdZ7+g+zgU316aFkP\nghYQmi0dzEJAjtSdLmk4vcApHzH0fCbKgpo2uQOMhg62gcakLxt8UJ2dnfgI\nuDbz6GzjCRWZpNZJfzhCV14CxKBIkrvORFfYmdO3tur+Za8y1xMxHRFYRFBh\ntBYfveo5DNC6CqDbipTog1IJaxalrei8Vp0O/pEI6x4aqmImThpCpg1UPRd0\nQDQv5bzPKtDosckIpT7A53v4OUzbgT/aDXeKOKGtYw3oGZpSSHWpGXKFylgD\nDS0xV5GKSAdEcw2lcCmxYljRBvpEF6QE9kKHgev9zAvJaQYQpo5iQxIrLZ30\nsYp6/r1irarKgaRAZGk8Hi/VKG0oG3knD26l9ZL8BLDg5HHoUGFt0ZTAaSWQ\nhZSTUE+xjv3GVD720gTH3hlB4bIjO4U1hq0uMRkLwbKN3b3nGfUYfhEyH6+K\nZICrzV7/kptlbBbg8yFYvR8wCDEsOlk9gIYpDp3JWTLXgCXLPBS4XvqFoE5f\nbgb/\r\n=fb/g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXosSQT6RInWpALh5fKT03QybmwbJf8EmewB3Q9/7b1wIhAKiitVFdQeNJZ4DTTDzD/eAyLCNZzBerutZJlzBzDmyM"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112231523.1_1641929222081_0.07759818904568716"},"_hasShrinkwrap":false},"1.2201120015.0":{"name":"@bentoproject/soundcloud","version":"1.2201120015.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"c592aa0f3999a8b6109a8a31a07cae6a83115d8e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201120015.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-CcyxhFsvtWzSBAbwM+G8KKzBQXqkjUa/E0wbRzFk2dwQfcb5FfxFhFEEXrZVAhHtVxZ/plj/YwqUGjFKxI2Klg==","shasum":"e85f1d44268d8c35c717f7178d679755e587fde1","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201120015.0.tgz","fileCount":27,"unpackedSize":853346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3soNCRA9TVsSAnZWagAA1GMP/RsSUDb2xihckf4fxa3K\n31tOxkaqnCDubWf/uGSCDWNR+0Epb6olKhVQTX49Oja0KshF7HHqyDRNXz4K\nGsOckpUB9NdlMVfItJ0wAHu7EXeBFZEHtdidN7HTNneHtmOnedmeGZOPgWpF\nNnMqFPm1ncES1E0FCjiYGkzony3uJa/bXRXG+SiFB4E1cv9iYDnEF3pHPScG\nRwB0ry2GiESPLIED1W6UwHVTtlc2mZQAxb9HqwCSfV1J1B6CE9SWZ03dijnw\n9xzSpu7TnGS1ScGF86D7bS9CEBMK2lbDquwyio1Xi5fDimnovm3GpRDzMdMC\nUl/zMD8ycoqW1o3P6XJnZ2SiT6DT2hiisahl8yim0Gx+0i9angZ7Om+1qEgJ\ncbvRItt7rnCOL3FZYs2AQEu2C3oKCtDu0kCEw6mQ7iDOpciv2Fp01furV5aB\npHuhdfDUklCU/Pq15Uy3F28y6CyBap1GFf8mDgNTyvIu3GAPHDED266pZJPp\ncBUs5zliqFqcmg9C2s/7xz7wu2iN2SWuW/8NLOkbYDbBiEJbj5x6/XQ8CnVs\nJMb+jMuwFBXs/NPMYhBdG02E03mYeqcMFbhKWqCDerUo7HPlHVo6NFsCSvtb\n+PPb2VfNzDvk5boe/FaZsahswkboXBHlXL2H12vR372KnlPFff6A11U56t7Q\nP7YS\r\n=aM+m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl+S04xkq9/x3vt0p0dAg132ifN0cFUVc6nlklACtUzgIgPlN/rMiSHp3ggOO7KM41DGZBm60F1QY/ljwlHVYzxNY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201120015.0_1641990668850_0.5400368606586066"},"_hasShrinkwrap":false},"1.2112231523.2":{"name":"@bentoproject/soundcloud","version":"1.2112231523.2","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"036fd40f8ecb160f2d6c65688c6ff4765a670bf8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2112231523.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-QQV+zHihZXYDI8wEuYwuDzoH+JhENNt1KsPNQBMMOXYYj0hchvv1gbSSp2LMODdwuSRANh79Vx1Qs9UnBZzbKw==","shasum":"c01195b49c5458ab236f3dd19c327243cd413fb5","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2112231523.2.tgz","fileCount":27,"unpackedSize":849709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh31kMCRA9TVsSAnZWagAAFUEP/RxVuoC/VPXuwR73yjn2\nm86PSeTs8OOUJq+xKGo37L7w0tIQ4NTrjsKcRQSXw7agHwfKJIAMk0xDDXvU\njolzZPKbr+JcU1rIZ37STMBxDYH1XhbA1Zj4/SGxXOSwwrr/3ENfwVj+wxhl\njN1M6S60TfNSwXkgtqhR7UbkacI9dkeNu11tsZXZPiUVWTW5bse8xMxTOvV+\n+7R/uq7qpKjBLtPWCcPMtNJweHrpP4a/ykY1dCMbEZ+agrQTTktVI6HqSqum\nhB1BKbLA0zonhpGrAawNXsk6N2Qhsp8CVUYVNIqhcXXaREzpvKuGsC/KHrri\n80YSr2XsgjWlePW1ZBnCGJDjMbp+Uu1kTWf/SxNKRPWlF7oD8VwYY+gDlfw+\n3MtCA4jYuql8F0OuOx4yzGsHHJd325JK/7HdTxzChZnUX6FQmWllypBMcLpX\nmwfyZ8vLe6iPSTXXsND3+NDG/JbI+khA9zFjpW+2MHKQea5P8ckc4QFlAkk2\nF7k1VSI89gZbgGkLkujoshWmBj0qRT39Q2KZDZjSaguX4pJMPs154mKJUWoD\n0PUXysHRwoCAaxPM2KWwqYHg1cfWFehKBavC+KVAY5PjRUpckkBrF3oxoKwh\n9mErnZBleaA+fzbuvtbbLYlDUsLsY4oBInqm/kvAFwbRvauWlcGtZRhJzpeB\njayN\r\n=Cy4X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWgBfBt2zuS08ay9fjVYhI3076rxztOcoa59Z7MktqvAiEAth/ZPl80Oke8I8ynqXAeF3sje1c+MSQ35wZOzVAEciQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2112231523.2_1642027276149_0.5623171242125602"},"_hasShrinkwrap":false},"1.2201122239.0":{"name":"@bentoproject/soundcloud","version":"1.2201122239.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"c04895bc1c2e1d0b7b874427b9bf1cec2b4b9f72","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201122239.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-4hVR9X4PNnXD1OR900Wy6U8V4E8NgQEv2qdi5+hmq/fAZYpO28u+GY0UnCwNNJO50goVuJbQyjraV+76Dh/qog==","shasum":"5cb241ed30e6f74c49b8ba79ec659e55d3053ca1","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201122239.0.tgz","fileCount":27,"unpackedSize":849709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CKQCRA9TVsSAnZWagAAFvUP+QFdS1jnmoaz7/NCfvhz\npAs9mySEuyIRpDd8XCJOEWNtW7S9qyid6lJtJ78kqHNolLjplxp6WP/HaYS1\nAfTLDR3F5lC6ShI4MnwUfJMCFe/X/iObvnJkTdQl6xbSKWAMaquOiMyo+5m/\nnLYQBO5k2uKIQw0l/8BkKabEV5v/qLUcxjOBfOZlnlVCPeyy5QtnV21bqrad\n4rf3MdXWcn2SwYOkXm6Q7IAP+LwD/FLd1omDzkGYBc5KkgXufKear0f3HQBH\nl3O/rAsJC0dvZi8ndU0tRlx9KwoBBk430GxegoX6K+BQ1nFBH1avtXRQ1ye1\nisC+P273X/uTVCESRx2cRHHMtr5X9FxU6xJlHbMbP6z2bzGpJJmkvitOzv0m\nbruudWGewByPr6GL6WiOQe4xqy5VL4qZ0gkOkXpE5EFuUgdZq0GHstt7Gxd3\nCQZKJG2nnWaenTKSY2xvBBK4uvkD0BFqEBFrnJCizSL8d9W/oe54bJaFUqdc\nE064mzfKT+kx/nmxw+TGTJzTSjJSC7qJHYLxRQttJ6xyFPn5UiXTjHg5ovc9\nSM3r77hrwMNDv4seNUREnjnao6Hw5Uwe5hi5+1Jh7jf96TqAI7bRuAkKjSHT\nyok3nS+Ma7KPvCSxd0F28PSdLViTkUYes01rrvOvsW3SKKb20YK2Na7+KbFw\nz3VM\r\n=nyKu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzAY0TAAMGe+zTfsushSJHZhc1sLKh59y7Kba+T7EeqAiB4IvTLvz65DdLaXgXLu/RT2Cj8hvu89Rp63ybmlLlTLQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201122239.0_1642078864671_0.5888707214018771"},"_hasShrinkwrap":false},"1.2201131702.0":{"name":"@bentoproject/soundcloud","version":"1.2201131702.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"e9b16ad7a5cee398ceaabf6ba7990488624e098b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201131702.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-vlUGT/O2uMQbjyZrC64yHpLpMLl7YZOYz38DwGcTqptgrOE/qhkSUtmb/dtpJnawHY0/1RH10P/cXcDcPS8wUg==","shasum":"cd3007ff1be5e0c4a1c24fe8612ff38d16860873","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201131702.0.tgz","fileCount":27,"unpackedSize":852539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4XU5CRA9TVsSAnZWagAAuMgP/iyT6BULzeYCrNDuX7Ix\nKG6yxHzN+Q9lDQnJS+v166d8fCuTTal5WBMHOg8q+b6bmnjuX7Z68YxaY2oC\nMm0UrWJSSO1cxFkmW7t+kTPmmndU5rCYROG3/0wOgKpwXlw5mvJiLk5EgUsM\nkQkTYR1XA1uuxrL2LWeryfQ+61C/bw4b1Pryl/agB+VrPwazrv9SOSxo6NTy\nVYm9LAI4+AkQzV7LsY0rGwwHb6ibwBWMJw1IMso/d8cNZ1IbS+qb9klsTIWt\n9GkAe7hKUNSu2CQZENWQsQhA70DecBS9WrpYR8kYGL6T17mJFJN+xD5gun7c\ntTBNs7W2NU2xbijorXi6hug8kJVkr2uwglsYvo1yFgNCCVM56pQSV2TOGzpM\nDBLYchey2GVzCQDVPXN8svxyMfJBZ56pCa7A/dvzFByLH423bE+oNVO6Tswr\n1x2utLatcfi0x3tGLXeKBxn+4xUB7dl1Wf9L2oqV+tcqGAfCc9TA4gReyQKi\nKPw5S/TGSJqygR8ig+t8OIEaNOdaQ/uz7989lP6ACq/lZCoUy3ExVkcqeZ6i\n3g5QVX0A46tAoFCDOMQIdiHQqAIwgRJwjoH0NFSOxjiCKn169rgeZwPRuFQ7\nuNSkyMxsQRR3WN5dBIw/l5JJaEJWVwScWbMV4ba+hXe0YT/qxLcI/KPUUdx8\nQwao\r\n=c0xw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYgf71Zp3wuZbnm1ssx3I5OAl6C2NnLCguuGpmhrhsNAiB3HciUwcVU+wQrYc5qikIHlPaxW8xCS2tezoxyvGksYw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201131702.0_1642165561441_0.3263715821174298"},"_hasShrinkwrap":false},"1.2201141909.0":{"name":"@bentoproject/soundcloud","version":"1.2201141909.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"96bebbc98d1f79b185c5ff6c58442ddc2092547d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201141909.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-1p1aawi5JckAatWZEFQJdKlayALNpt7LY7j5+zyVQ0U25PmX76bFOtDGauejYYSykN0wOgih65C7M+zh28dqmg==","shasum":"4278428e356eb97f7ea9a838e3f962169cd1f19d","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201141909.0.tgz","fileCount":27,"unpackedSize":851250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4ry2CRA9TVsSAnZWagAAj0UP/2vJ3oiOxfZlIfFfdsUJ\nJYpclcXfhwqx8AUYYa0FZX7kd4ReLujw+XQ7oDrFlZ2yR3lBk0VRLtOn+hQA\njOqqbqsTIR4MeUbB9fk2eiI+K7trW5FPelOwRHe7ONpUGj/UdOpYflI0PSZV\nfnvfhtKSgohTQU6LfwBZ8XrmQ3JN/BFqYiD3R0uwIgWaNM2IsoDfX9dxWpZe\nn3paBrfC4fe3l3kMN3/MmengXXFkJDHOlaF2GlWgf832gHK3ih90Q9oFep3d\nXg67jlLyj3jhbGi2hj0Lw/h2nhL3BvZb/8eRxBCNs1yUEx58dWfcccfkOYJQ\nbvTFQ9KCAMoxNMQOJ9sGZy+ZKtMYkbkmLAj2E0uFOYtU5riC/oz9cCdv1yYV\nhKB9r2uukprUrdk7T++hyZUdKhY9Fu/0DTfpfRnzuzgyWUudB1c8DPEwISgI\nqZbDd/NjlCIzb3fYnyQzv/AjvA9vvp3Xac6SIfDJDQMobAqrLIiYjxRFo3fD\nLlSF3mIKMzyFjmq4Jwuq3ojazq9GnDQHNwrBLcz8ndvfbfZ6NZkv1oRGQ9PS\ncJQ2H003O6wGrvinYIjyuzF20oYYEcKJFeQhO3Ue13lNrORmCoCd/7Eh+9iE\ndo0lnnyCv+KtsplVXtNq3WTdlP3T47mcWVdgupkQYIyWCShguoNUsx48J+bM\n0gsN\r\n=lg9b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHCdrXG7NdvoyR0YWVeW4R6kkZxbWLOxs5Lpydz3ZFBRAiA4tdmy+liZG1/bvRpDyQqNdQEhtlnDvv8pOfecVJt8yw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201141909.0_1642249398457_0.5566905947319463"},"_hasShrinkwrap":false},"1.2201141909.1":{"name":"@bentoproject/soundcloud","version":"1.2201141909.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6474ad58b0a7e1997cf1472b09ba21af402b09fd","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201141909.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-NOK+0v64p62HCzil6P7F2JSv3CfmeHIzEHeVvr8lngReFCJbsXcIypM1gnrDwET3bL3vCd6J0o2EnnKQMMufeA==","shasum":"13100c18919b260bb5b93925299a33448b10db7e","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201141909.1.tgz","fileCount":27,"unpackedSize":840672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8FRJCRA9TVsSAnZWagAAAx4P/0hWdH/lmon4U43J3UCH\noKFJPFlqIns3IdoiC1JoJAyRn5a6xyvq2ezDPVwJCdshd/ZxG11jzpybjr/p\nbLUdy9Ehg/BY497QUtv9krXov8IGgE1cJAIzTP3lezFgOyCn4Ie6p45rvfFy\nxxLIl7qKIDameHDYCu0OME0iBU5Ec9Lr9uv2/4PHc+Qj3GQXVAORqah9pjiB\n+c+LKqZ++5ku5Vlb9+plhH/yfAKrk6Cib+s0gG0yC+s3b3yLNdJ1K3g9kvJl\n2vZsmiEYDf1keo3vVKOVzPoKUgqT9yya7eYFeg+l3ehw3Ejcwj9Q9+7QKz7C\nx8Z2bcIsrAQViEhTSd2NPn9VqQkXrqbPSBnkk9VN5DGH/W54K4LSuXpLCKW8\no2LzmmtyOAEmqv5TEc4Ir1O6yZciWxaoWMU7YD5mNTksxWkJNUAO7hLG3drT\nftCpAggrpolj70qtmO67311H0PWd8fIsxITZWQWUMQVCZmX3w6njYKSfsrRj\ns7hAaXZdQQgCWK4J+hqRfQK7ic+hyEt2ul0o15jORj5bWLUueq3RzmUlPtK0\nT8WqlJbZFBe92J8W0dOM5NZOJQwVanwqEpEzCmOaBUhXpxZu4J8iVWADTV0S\nj8Ihab6XfOv5eL54VS5pBJFrHajJupQufK39GXBQKlf/bKE3wNNPOC1ERYfQ\nluZ4\r\n=aJ1U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZqc/Iq79l4nkSIaoTyDcQsKtlRzbouAdJPWUc2DGkdgIgUaQzZM8KPiOpbWUlNUUs+SnQL9DGBVCT24ZImrSHSec="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201141909.1_1643140169070_0.9415108007947859"},"_hasShrinkwrap":false},"1.2201141909.3":{"name":"@bentoproject/soundcloud","version":"1.2201141909.3","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1edf4ae1e7a533868a19fad5b3b4da9917432bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201141909.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-SIE9JFK+WxKJLDUnjaVSgA/GtBW3mr9gZltXqdzOrulvVXXF+0AuwXIj56eW+f8jdxNEm+GFvXYU0zdn31s1Tg==","shasum":"da0070aaaad15f7b61e89265ed6eb7c5759e0f34","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201141909.3.tgz","fileCount":27,"unpackedSize":843062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bZKCRA9TVsSAnZWagAA9CwP+wW4+zVLuv51QwBg94Q0\nBKlgZC6YZTDFZ4tj4RPG/1kZb685cyKz2MYIowLlon9D4/oHCZXOAb4WCfjx\nHF5nOPATPN0LgSYYZ4TiF5bQ+JiKSXbbyV/yUEPxyU8errqAYlHVrola8qbw\n5LlRkjDFVaqkDr6A/Fog7WtU8VrziaSHXh/Z1lPX5D7LmhvwEQiGo9hFpMmu\nxMbR+K+yamgwTilsxQHaTnhV6Mhir6rOmefh0lzOtEKTvtQemiM3QXZXor8Q\nosundBAQADFhu1DfXth/M84Iw4sngXcrzsN+etOoGzdc/aoNCGa9F783b/AV\nmq5kZ/zpjtdoqC+7YYf14hH5sTmYe2MYl8mqkaXkm7QEFmxTjEXKSRGnod6n\niXQ7C0Q0AOn4PEcrIF01sV5pjize6N87gV/+7CfCrNqmZ24B5F42rosuyodV\nGTJp1DZBEbEihqi9CD0KLgieYxQ7d5zKEWhmPTx97po7sSs6rqJBqqAPajpj\ng3zz0gq5xviRr2KwTfbyI40blX6Xvx13aIu5UY10cd+rCy8X71vUUnvBH4NR\nGFU0SdTTCtOC7fR8h13CKpXjL7Zrce1ccZS42BEUbynr6VZXER6EiP6C10Ee\nZNESP3iwfPr5+ExwyYSLwPQQXgYYfMVW8lpUvPlxf4u0FsMt/Y6IDRwCodrI\ngpiO\r\n=h15Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGRotIuqUEiHbDA6mOM87B9meGDFD6EmzzGrrFCCTSrAiEA5W48sdEKxY9S5CrRHw83B8Z133Uy5Us419BteWzYP88="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201141909.3_1643230794778_0.0738920175139346"},"_hasShrinkwrap":false},"1.2201141909.4":{"name":"@bentoproject/soundcloud","version":"1.2201141909.4","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6e60d79b180fd0983c9644d325b45bd569c6da2d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201141909.4","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-xpXoLJ3N0+Ma51KzssozsZHj9RIzO99SaJ58zq9DbdGkwHaztC5+97HsUqq3IfoYlbD5nLhmN3c3UqLth6e0/Q==","shasum":"90dd190602b8b15a55d5d368c1b349771c6169dd","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201141909.4.tgz","fileCount":27,"unpackedSize":843780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+ahRCRA9TVsSAnZWagAAV14P/0xW++O1sUt8stoF3acn\nmW8d7tR6ciXcenPRmDiCJEZ8MjHvFinhNrTd2+H1R2fRH8KYR6Jk4tvcdbsN\nslNBiGhUz9bm9ykNTywAVlLGYSl/Oq4Mtp1lb0qnO37y4cIKMjj7yIjtnq5n\nxj8SN/PxyutswjlvSOVEcnF3X4HOWBZ4prEE43bKuEm8lLJuPc/7rUO+EjDd\npNdu4mHIcfgUgBJM1HTDmHkpUN9tQ/f501Kgg/+XgAo43t0jWSWSCveVZ5R5\n/y29/PS0HnmlT51hPvq3RAc7zbfynoSpBTRBE4lVZ3PexelByoV9TTGUNxjM\nGVm4FYLuE6dco5AvR5hl/JFRO4A+N7ke8lUydNumydSv2yuQ9xOHdIsWYPen\nLk7pSU4DJtWEegi/5Y+H2vDrpGCbVi6TC7Dgu1sSV1N+cDPfknXfcV7ol6n/\ncn6hWvfEEHWvU6bXpFnmnkAMF7uBtGg7SrGVAGHS0oTDwW504PzJZwiz7+g+\nU1o31Q5EYllwl0tlmXhg5eqqKrWoKJ4h18U6lAk8u+sM/Avro9nyxQPgv92M\nGWD/201ZfMV17TTRughSxEDV2KdUVFr8k6lTxb8lUoerFW8ja0bwGwmLQutq\nws+LCqw0avPSe5AVu4YA7NpMK/0ezWl3Zm7JIx2wlYOHTjlZVLCvV/36SFxH\nlK4p\r\n=nZRX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcy9+H8kSgda7wp3b5o7AXYxME4mF4unyLMS3Og8b/FQIgLZ7AYvIiJFBSiero0ndhbO/dmW0N8+2HvJ7uj7MVGkI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201141909.4_1643751504913_0.7796589995807581"},"_hasShrinkwrap":false},"1.2201212122.3":{"name":"@bentoproject/soundcloud","version":"1.2201212122.3","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"ca1c7d4b4b4a72f4913d7c304b5368187458574a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201212122.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-UUiKru54o1pVjhlERZaOD0t2eJVRGziZT8NnudyepempIfqu4VdfKUStt2ClIL4l5ZrnKU1wkllImRorzYHIEQ==","shasum":"5d4b33d622c69bd669f5f9c591c829098aa2d215","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201212122.3.tgz","fileCount":27,"unpackedSize":843780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+sbbCRA9TVsSAnZWagAAcfQP/37n/PQqpQFBqRdCXJ3L\n/7jcUMznmZrctQmF/tuGYSAd7+2Y2HtvRzUVsIKUHlGJqRemEgF7GCMQYVYM\n3BtgEvUG6FapM4iL7tXCTyJmIx5UGQIhccf5aRswwWEfDDSAOl+fiD2SWsy0\nNCCU82E35wUE5+KPu/V4IHhj6d9MCoBDUBppvpodD9CznfvicpSJPiYJ5Uxq\nxClnTtYM1HMhfopwvh6Hs4pjrJNSU1d0pHW8kaAMo0Y1m6YHe1LZYQqRYc/K\nVG0ZkhiG4Qcx2LO0rxQ1mur6ZL+TIlVTln28Ud4hwkjssHOBFrC1l8D5Lih4\nfljXy9NT7zcQpqNIB1Hz2L1MJMZ+Gm+aJMsQzeWO7VFOyKqZ+97H1Y01LcPg\nvrHWYVWBmgWYFolR/2tI9m1zRESq9ds8JRYAwWR2Y5eYW4+rZEYkzgmqrfFb\nZHBsL+XQt38cUpR86OK7X6hykr5R56zDLy9wAMHXGo0F/s7chHNyO277p7H8\nV1vrFS8PyQD92XJ6g34apD56qnzRbYioSPDIeEynyxcYYh+rFA4YktHj6qMg\nXt3R5Fr8nC/yixvJfuBCF13zkCC/Tuph/YY4k4HVU58nN/MWdAp45FSN7NHC\nlW+XralRbXjy/OQIOsxDqqYuwvlOLs1eIkxrCiOtp/XsM51FS0YphdOQgZRo\nyI5m\r\n=bnEI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcHECFvv7Na2VYUjwLI+lbFLmLvEtied4eTYzh4G07swIgDNIzhwSW0U0TyrZb1SD64Ko7oLfxo/tOztTgF8KMtBk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201212122.3_1643824859088_0.10866626708415095"},"_hasShrinkwrap":false},"1.2202012258.0":{"name":"@bentoproject/soundcloud","version":"1.2202012258.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"fb0c4a54446b5abfcc53d1d446f24370c05507c2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202012258.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-FNyrQ3++FX75MG7kFeDcO+D4h2b3p7f6Gpo1O0+ZLwwQXc+KKPeAQJpQTllcL+ziMxf4k/2i7DKWdFDOYaLwVA==","shasum":"8495a6d220fcea52298e88fda0d71c71a9f0a4a3","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202012258.0.tgz","fileCount":27,"unpackedSize":843780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+tfACRA9TVsSAnZWagAA6sgP/0YLfEfaCqdQ5UrDS3Ln\nLEXAPiN7PaX+KVyd69f1MdGo6XbgUP6uXreYEyrJ+dRbofY2Sij9JtZfTOSy\nBwc8Ryx+mnxQfkfrfJevM6u3o7Vl/oo1TbkAHqHnR6aOdpqfv9NO/TzAclfb\nlkagbXtIVNEX2HPFyjDmNM7UBfPdqVvaJvuAKRZ+SFV0yJlqBCy1yHG/Skxg\nq3Sq/gkjbKG647IU0ej3UpT7KSa9EykJFkdYMgyfskWzyJ7pRrZXwuvBvWzd\nb7Fhu/kLDPp+DUlpHZOK6OS1wRKAPMgRZlhlqiNPvA3zlCBRTINreTP8d69W\nRoSX7wVcUrWhEp0RwfKP5csRwLEJayUhV3T3ukHLfgn7n+OlwQoK0UEdS28j\nevR6j/ms+k+OECbeYNAcV90Eqt2lPHVbUcjQERNKdIfHIdDS+8FM9PcMjEnO\n0fcuVYW/OgNQOkLlN1+Y5n6hisT3szK4/X6tSAwgqi9Pu1J/ygEmaYwmg6cq\nB9BGeFHkp/6+EKbpSpl0XG7HOz7d7nycPK5/6C1+64q9Hsa5pQaDazh8nGO+\n4nbHdpXJYp61iI8vrFd16OVK1jAo0p9QHxFSzu9bHmIBy4KCDvHhVIQ9zps/\n9CE6xwMqUpxcTW2pDpyMHp01ue06FSgwuAguSfTWDWytb3VXRR5b9oBFVhqi\ncVJP\r\n=lr8Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEiR60hv0ai5ux+dQeISkC+SAT7bwGKVUucfVohPLWygIgEPblyY0Vt+9WLh35z9naqrLBSQ5Xv4fzBLiXdmSl6mo="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202012258.0_1643829183709_0.7889753287209254"},"_hasShrinkwrap":false},"1.2202022130.0":{"name":"@bentoproject/soundcloud","version":"1.2202022130.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"76b8fbdfc923fb90c4ecf4dededfbae0a5978ff5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202022130.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ViPT48HL3pJNUBcZD/jkzg7MV7NYqUrAX140xADkioeWPod3oVacjsW7afZemEN/KJxkk9MzVlVW27zqkFepTg==","shasum":"2f2b3a2007fac7e12800604200a5e41dc2affc99","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202022130.0.tgz","fileCount":27,"unpackedSize":843780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/AmjCRA9TVsSAnZWagAAiTQQAIu369MdkypaUiq4xsgo\n1s9iTe4D3ke6aK8TiVm0NdwHGgH2HXnSqfD+fMQypGRzPa/QuyN/lpv+4oWk\nO8Ko4Yq64G30dzK8QXWv+YWiBCmtTFa1OYq++lfsk2AESWE1n/eKizb9zHGi\n6pWJeHHh/8tktu/DNts6ZtSaNAscsr2TVrav/3BM/vUaxgeqloHlSd/W10+X\nnsvT42TOXOLMncUV6Y+NunbfzeFDkqpjT5Bl5HqBANQBHtGXewUV20tpIZ/0\nncLfh6vI2hqWhLwLjT4a70TP6ULqmHx4QaWb0aUnfB0v0fqAdPHz7nwyRkj5\naE8WL9SjSUqi76VLNVhjFq3lAQZ6PwOWaW+9E84mkTTD3yqzVVbbTeMRZ3SN\n5Q/Kn76KpTWk1sP3y0+uzReNYYNL2P1XCrPcOkifd4dWXgvKOPmX1qYcLKXz\na1trRst9QquE2ux3THq7T9ZpK7Jr1BzGzs//AtTaD4mhUOTupNvGEhEX3Rqx\nX4u7c3i/JB/8Q8rqJBFn7qxwYMTG91Rh+RbPowo3xomI1aQaHMYiRK4X2DV7\n44xsp0RYWg/S3Yxs074L3roMX0Da+vQN+ExaHxfH7C7F6VOYfIeBp819uqnQ\ntcqRPSlMGsYwqzsvRZbgI3S0IxMBdY9AgZtztWdU4S8bAjbodld9vkWc5eZe\nogql\r\n=O9vz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC27dYQLHABSnCvRG2C05RKoKBmJ0jm3QtJjUojZGRA2QIgQW9B4FTDhrDQnfsZ708w9WtAHXgcu34utD0TnrJSNL4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202022130.0_1643907491763_0.3433657405117514"},"_hasShrinkwrap":false},"1.2202031816.0":{"name":"@bentoproject/soundcloud","version":"1.2202031816.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"b29dbd478c93a5298a18f8df14e6c1f5184879e3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202031816.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-fT/CXZ5tkhlFPkhkxIYE/TWdTQ363lCjRBipKThmWcJlBKOREzUY4gMiIOZ1w/NJwBRP/WiHLfaSJF7Agjn8aw==","shasum":"6af76933ae2f76aa826466078df47d25445f1da2","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202031816.0.tgz","fileCount":27,"unpackedSize":843780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/Up1CRA9TVsSAnZWagAAW0kP/0wgi7mO4wdo7x6HrDp5\nVGxVEh0v/aasFOB3KB1Rw6rqA8DpRD28in2NEv1TteUcDmOAQny69So2Liqm\nVbFkpcD15GBX19wVE5tYTaK62CyhhwKVF9CQra9zJrYvMrnPqZUbb+PS9I2k\nKOPjWeEI0ghFWACyp60VsMaU81axdoNHw3UQhIYyhFydZxdmdPvMQWUHwEHs\nLPYuN3sa+zEor1b/68eon/rxyZXI/PSA63Iiop8zJAP763WHT9OE4NvGK3Dz\nyl4oY5Dm7Rl69ger/KphaLuIdS04188NiTN4xnyyfIgj+WzIn9OHqjq+syvx\nfpey5J3kJdDkwtCj2sDG2Sp6kvga5y0SvwS3IANRruZzbV9diOCTKK6XkPx2\nznEAoHxgo6c+xQZ4Y1XeipOzXE6CVJGL7DJ/8Ft5qTvC9qpA4+7FumbvgKGq\nJrRyFlf/j0CAFkIM18yfB8iKMxwp3EizKcbseuJC9svX+mLPX0I8HvAeY6Jd\n2tYWeKMGr6Afve+qU+QE47ivqo62c/1Ia8zJGf2IlPCYvHoUejaqNqD302bM\nohgoBgpsZSnalKRcKdMYnR8FxmFBych5sqGFXimpv7inhqnSkK14hemUNqod\nKJfbdGsWw8rV/PTATwBmT+uK7GzL6V7nPvCuN8IlHHt4IszlGfI13Nd6wlLh\nvgxG\r\n=XlSg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9yYajOR0P8IIeI34hg5MpJdha3nM8RPQqn7naKrl69QIgR6I9iEauQE0D74aM1SDm7iuV1PCQg+Urvcf19+ESPMY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202031816.0_1643989621616_0.066997540865678"},"_hasShrinkwrap":false},"1.2202042210.0":{"name":"@bentoproject/soundcloud","version":"1.2202042210.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"04d031e10759f2ab3f4a10cacd2b776e3de93812","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202042210.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7Pbl1XAXtc/VIDY++/qltgkaNjfbgw2SSom7cwndtdgeAS7JQa0VFdpvGC5oo/DSsrbA1Md1PesPOssobz+lFA==","shasum":"4911314e00910bc782f72eda9052695de71630c8","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202042210.0.tgz","fileCount":27,"unpackedSize":845378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/kDVCRA9TVsSAnZWagAARAAQAJ7ppFq369lyoWvEUqcB\nnGmN0cACXlSarJxEUPe/50ihiZdKb50ue/G4wHguYbW6rDTSZ0a2wkHw5n6V\nqJWUoUGFWtcc1YgZjKKmvd8d37WFqQqHy/raqWIFWpVJpeJLcYSB+3s2fUn+\nxBHvNY06F65v9n/e2QnF8H9Z0om1SnOdUH6USCAYhtgyrc7UqILZXk2nf5JJ\nADz9g59qzgtRG0SH2qcP+BVNrYlxT6iPJopbgR5s7ZNz555hrq1//C2kqbdH\nBPU3AMdgubtdc9lF4ZbB59XRdrfpFl/Zq4S27rIa+bOV4Gns1unUt5ZgdjY3\nwedBRQabgMffrSdYb1dXfE6K+IUHPR9aNfWoISrARGhVmfiIF6hkJIs204Sy\nhoVRGJp7+8K+AXNYpujxXRL/KGjxLeRBC3PrAwvATsXHU4RUVnXswMK/tFkg\niD9oXZOTsnrSJkcUUKXV6nDMbRdg3snbl7gyP7SubcN0yLhuzwJEV6o/W1XO\nkXt37t15/6mfOKrUD6QNb7F8W4oDc/jW88LpQD2KVzbbRa37MlYuua6ARaov\n6TNwM1F4iorGcJWHrdDjXgPq4QjCKQANxI3joHaG8n37lT9TltooncCtcvcF\nCEnx2pPQX+VL8uDZ1K59OA7detrcfORSuBJiT0R6dH6zoelHf//EWQlE9Rnc\ng79a\r\n=1Ntf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDnyNysnGpvTgfx7noFg7fSWAQY8+ZPf0bfv515q1vrgIhALevy3z43WTAB4xRC5QZdeO8L56X9VyqBC4W/0Rk4qoL"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202042210.0_1644052693492_0.33801872304696157"},"_hasShrinkwrap":false},"1.2202072236.0":{"name":"@bentoproject/soundcloud","version":"1.2202072236.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"1d8443e81e44defe1ab915032668da75884187d8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202072236.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Qqtqk+6YLFrAl5y3tQ6c8il40GSls79lJ/H5tLY/Sglv53Vf1vhfmj+DgRsby6W6n7k/4Pg5794RB1as/kBEsg==","shasum":"eb6c716adea90b27555640fb12e2a416620c52a6","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202072236.0.tgz","fileCount":27,"unpackedSize":845378,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjXiCRA9TVsSAnZWagAAoIMP/AsqVTHYpnP4rNdryyY9\n2/2OpyihRzcqyuSndGykhGrOkhF44qQoEznS6w0lVg6qBRvjE2NgL7IBE+kd\nZfVMr3CxdCg1MK3H8bxu8JcAmuuytIM/LzDOmQIZqVTizgrShQEPgK3g95T8\nZ/l+0DfnzKDMcrP1DrbuPMD1SPuOiIjQT+37+EFcP+BbqPubBxR04h0gCDof\nXH7IPICt+3C1+ATXqnzMYzu9qSl0U6JRR/vZe725MRyvqj/t+XMH/OKuo3pr\nYAHB3lk3TVvERsBuYIcLBT8CDdQDVaDd7U3WwDSvJGIRk3DgOIRjl86/NkuY\nGmPq73+Oct/AkkFfLU0yaOJ6thRpwS58HkAkypZMczmbCa5WBsuJw5RRX8iX\n5+d8sFiWY8/bKoBel/tEyhb1x2zzZ5Sje6t32c6lgdfxqh8QsmlKLWZQUUNb\ncNVoTdfhkeLaOVJXcvnuHRbKz6IOzia1e/GRSQ/IXAcZ2VYpu2ZYv3oV/lSx\nikS1qVJC70rwkdMS5by5ILVZcyQhgFZsa7GaDcuJMHRArELQf/zoFQZFt9Kg\nUzlOe/5GZcn5gG7qFjnEqP8VAWPyTTEuh5ZbBM752KI8WK7MJr53eAwVp7N9\n2vDz+aPo2IbXvqsJUqs7pMfI1ysQTNjKUHD7IxYCXh90qTNQf6hEtICF+VQn\n001L\r\n=Wu2i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHsLtRu4prgd0+/XR0yoEzuj+iEmA4cLKrPPCrPb65+pAiBNtNvh9ZXxxJg2kcPu9Y/bQuJm1QoEwXrParZMz1dFFQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202072236.0_1644312034625_0.3820844028173822"},"_hasShrinkwrap":false},"1.2201262038.1":{"name":"@bentoproject/soundcloud","version":"1.2201262038.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"cb2af7d382510037805d85242e3f21a88654a20b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2201262038.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-rThXyaelS034LjPg+IJnBVS61lZPmSK0L+KSJYOpHC5NN/75vQgCNoz4+lJ90GpFxWpjH4kTS5W44uEGfIpmIw==","shasum":"0c084e389a222769a3f7a0b393d3367d65f6b184","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2201262038.1.tgz","fileCount":28,"unpackedSize":851853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAtzWCRA9TVsSAnZWagAA/loP/196EvnxaPpf2f03nsDM\nA1yIlSmfkJ0rNgSe0Fb9BVhLXmn0mtmNP0372XbPDsep+pQonuVTYWGJbdi0\nIcpW2dIePi9P6GbgPQEwdmeDg425RY7qaMtlmTsMOJU3ZDtZsO7JXGHJpOO1\n5yDMLOCqmmL83OWou3BA2yTP8/hCSKebBCsl/X2r44PwoYKEQk9sSggzO2gv\nUoLrJKLHyyyiiRNuAv2VwQeesmcUcnQx0UHrvg6cgn1cT5z1ptO4lHfihu9g\noTPfDYAwNtxPo0K9bysZcjB2PejOWZMyulOBf4iqq4pZbpeYvoAqbuerKZxq\nl2bjKIiZmlDRnuJfFV4aChMqty+UA4cWGx/tTAYfVZRKey/K3s/+9IwT/vUy\nwbopjJotqubfFVvt5HpBkr91V3+CyhblYs/YKnOaWckhOqxotbKjXaCu73Xm\nVlmFSU57Ectwvwe8OI7B5lF6/pKRXhTRwXrZsTxEJERzr1L3y5EMNpr5rQJw\n0He+6JfHm3yyA5N6a+ysWjzQoS70QEimluk5SVme/wWqIJmGx4Ro1grd1CU/\nte+x5T+cWHjdotGBoQFBefNoYUWgndnwqjBjaJcpOcJbMnKsrZlFlkqqBh3U\n8taRr1ZKZSoWbOOXPwZAu2Lf9baKsraXpacqk3a7Hqf3boM9oYqf1jOavvao\nL7VA\r\n=gfyx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHEKMcpXnIa67BY571nNAf2Jepy+n/T7y/M+csVynUIlAiAIA7yyqx6RSeo/4zo8IwHMxsjgJjOc4EG509D4SL9fcA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2201262038.1_1644354773935_0.5876611498991986"},"_hasShrinkwrap":false},"1.2202082004.0":{"name":"@bentoproject/soundcloud","version":"1.2202082004.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"572ca92abd38a7a42e381c556e12e2d929f26802","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202082004.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-4EIjHkC62aiCrUQHGSnv4ffMtrrMj74HSYNw5PfG9d3SbCbuzyYAYh+BItTFqgTdo8gXn+6MEAuwNe7u/xaPXw==","shasum":"d42757c5778780d8894cc04a3dcdebd4ce59bb48","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202082004.0.tgz","fileCount":28,"unpackedSize":851853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBD02CRA9TVsSAnZWagAAxB4QAJbW0nPfUG5OWRDxCqps\nq1cIqFLBa18xf3ps00Riu4DFzjgf5op2Fu1eAqErISA0i5n+FkMJu8fgutej\nazFGhJuKhnqOArqEWH3Pb0IDZYO/zoRwoA/PFAd2c7NgxvUuddNzBBzUbtXe\nER9xpT7jPQzsjNMdw0WZScz0WdjbYWr3EOJcY+GjrIGYJkrw3TijCpBsVGMZ\n5oigdpzhetjsj88SDmMFNw9Dx3c1ZTjUdLdGECd1lAI6AdU9vPa0ctR0Qqmy\neuImK++c4iiloxkdCsG+ZEx3j7SLqJYhKEaVfzgEaDozxJ718e47HSjZ5aVI\nWGBCLnRk+k7By10dLCX/OE0ROxJvV9kejSWnMoSg2/GV6lyUrQ9mua1vEz78\nb6Vd0cvJzI2iEYiXP3ZyzblGihVJrqXZ4mIOHXywMkHpOWMbdRbax4AjpAEN\nImWLQJguIEGn/lF0Kixhtvl+Pw+cQiRTuRDkNzAX34+uS9yY2J12cet9kB8D\nVZ8yOjUJCEBrXhP1JT035duQ59Djv8dRG1EEQj3346l/yqTwH4Hb4EXjFIu7\nfI9mFOQxndfvd1cqkyZR1X3mBqfkZpLmooWiDTtZ1iPFczRQS0OuNBmKWlTg\nb7ZavJziAeCXrS7NUzjJjzlqKE0RPP9RvEFL6aaFGTdR9F/7YTs7s0CNXge/\naY21\r\n=YNAZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxOZSTQmi3lfToQ31iTmXr/Z/49B+LJr5oeHNyZyHbJgIgU38qAaZY3UFVoqLueonTkavjFv2L+djjjg/porjcPHU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202082004.0_1644444982536_0.6790509271401677"},"_hasShrinkwrap":false},"1.2202092050.0":{"name":"@bentoproject/soundcloud","version":"1.2202092050.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"37b830a030b935fcd922e108d5afe28be61d68c7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202092050.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Qk47kurbwkxO2l5HG8DIMW/5gxIHoUOic6O9XQM/yJq3hjaTvEm1GqEp30u1298E1Ac94A05f7e0n3lVQv3tzw==","shasum":"1d6047d3e57c56c415a2d482ce3aa5739dda532c","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202092050.0.tgz","fileCount":28,"unpackedSize":851853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBVJvCRA9TVsSAnZWagAA3uEP/j15byZ7KrPkqLUCIyLr\neZsWkhGQa/PhPJ3INlxDwAmFuUqTThxZfyMPAyzsmdrRDym8KPuJ89yPMjKa\nh8UvsVazCtVsCKnneFhman37cc/bMb9QOxYfkofJo5D5BJlHIf2EW7EC08+f\n9JhWSo6X4DPholLeAgPR4q9T9W3jYpTVlQ2ODOGsKLz7xnjhhZdMZO9achP7\nxmG5z3OFr5A88r8A2nbb6vwysnpfouRKLLusH7ejdeDd17onSdcYKATjXUjc\nHCi51/KfOaBmSlzKhAO8xd3NIc4e31gHvyQyjBszfFGZVTGiWMU08XTA/ZZs\n1yttzP1SUq7aicV0o9wH0zGwpTZPzJtSbu6uq6b2WIpP5/4krRum0yRJ3+WF\nDUL+utwAQJYBcKjSrUGq/tKD3RtSUZjGiRf3IvrZivaxcUN4t/MesAHT4bPr\n9xvxZwfAJWTEv91nq+8/pi8CYbJ4LLgS02LzHhahUDOPafj4gJXZo5mhiYp3\nJ+1UemEju/fn1ATNPovayu+i7gvcow35ty5DbaL1OKGJ1B3+RodDI4eFGS31\n3dIk1H444QNvg7S0MEx0wxaO7ShU+T1WE1o/cT/0HbY7jHaN5pdhcoAKFIy0\nqWZ2m6f/25DziUWviVbQscuaXsLAskQ8TifV6Qd6oYmMmwvq6NJcfJ6OYSc/\nbbkg\r\n=ZY2P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBvswUpu69hwJHCt8YWb9LxAE3e1pptvgYjxYTMlf8IAiEAz/9M8+iO7Xp0nf8ll0retozqHcfkoB54yUEOH7k2ag4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202092050.0_1644515951206_0.13623535301794054"},"_hasShrinkwrap":false},"1.2202112230.0":{"name":"@bentoproject/soundcloud","version":"1.2202112230.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"42cc51fbf53c86e33b0a12004dfe9c35b8f5d0fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202112230.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-y/bC7V3iKc951fZUQSBDBMHHuSU/hGIWQ33TRy32DRHS04Hz6uA2l/ebQWfHhRND7ucg9lkS25VgY5MQc1zG3Q==","shasum":"4e53c75b1cf19d5f49995b8ea7ffe9311d7b36f6","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202112230.0.tgz","fileCount":28,"unpackedSize":849086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCsRQCRA9TVsSAnZWagAAeOAP/AmgT15epK9UWhwkZvje\nKdvwZ0jke0RZN3t26f5Cq5cRBQI4crrswKYJBEAvcZNKMQAIjekwnDIiKGtL\nH/98gSJTOJzsd3HmXtpSUyrioGZ8lP0FPvzWOaZbfp08DWvt7j5nCOUiMzIU\noVKAyyrK6RgPfRThVS1LhG1tav6IsFpIEg7PWkP9iUMMNjc9QLF5749E4gw8\nFlGfbMlNZ7d6YgC9yGGkDVDCxvfNSCSofARYhcmLKKZWaJAs1v3x34NbxWQO\nzYp5qslup3KAIdc5aFztiWFAycTFiHHJ0nDYYaU1vC/CNLpFlMN4u5/JaWUM\n7zNMcevCVKVgZ+3eu0e7NdAf9fiX/uWPBahuL3hyMxGe72g02RUJmX/h/vYS\nN5W2cVCugeYm+PQSzLVRgllzAuYMZOj6QDFesUiOnKZY664dN6WnIMfShxlU\nuRMTOw7/gaRW42HF5ErXINncqh7V8D/hUFaXD/U0BFVcjfc9szmrgxf3S3tD\ndWkbfX8sntzJ305fzRGrMQFOTEoN4iYWnDHqc9VqKvFsLZwPzaJdxMzDvnDa\n4JT7VKiiK4rdAuRPrdQ7CC0PZyzIkfKgMjXJ1gpMFVTsLHUIWs2ruSuWznnK\nDdl5IbwUbS64AZ2jzrV/KABLeJ/pNVpGg0IfnBuKTV8zWJV34/LdxCo2tQSV\nmClX\r\n=0kxY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZjwWAJjVRAcr7l7DyL+AzOrZTS6PV0zT15DMjM63qkgIhAJWvBCmtj4Q0ZtthBnjsawFovvyV324qq8WPVaVojEpN"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202112230.0_1644872783824_0.5800065241935504"},"_hasShrinkwrap":false},"1.2202142035.0":{"name":"@bentoproject/soundcloud","version":"1.2202142035.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"4bb5570c3d04ec8e2a88418e8ed8b420e5b31ce2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202142035.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-walSh2PIWHzgsJERmvMSvpoPtFFO49FDiSB+f15wQRKloW/vHTYzYTkturkVPUPqXsqxQuP0rdYDLXwY4AQ8QA==","shasum":"5eb3f2e07b5c8eb5422b39129a4ade5e619991d9","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202142035.0.tgz","fileCount":28,"unpackedSize":849086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3F2CRA9TVsSAnZWagAATjQP/R2UJHGvMjXR7fcPbx8Z\nbgPPoLg87BAOUnFAFf92uI07JFKaYcTrpy/I1l3wYHNRhoFimbjnZ/nqdEAC\nG38b/kn0yEGjFlWUfeWJ9eDoZa4pCYd37sIZ/PVC/Mi3Ig4qp2WHye7ZeLpr\nTglZUPHXnqnqDhCruD0c6fGXCh7S7EhBuo6jwigc3T2lvm1GeHFgqlhVhV7b\nh9x4flIIgEUbdIP5z9fp/FSCG+tRtTQs7P/TV+ySiEc+xQdPODu+G0uLkhn0\nqkw3l7WkeIEGWsjlEWCe8GuDi+uurb6PWZl1tgB2/DT+AIVknx/wDtE0e/0B\nFl3ZibWHft74rMai0WOPn4doz6BxfU0MUIXbFnZ0rwRG7H3ZNa9AaoXW5hJT\nSvdOZAzPd8QbfGT2agT+IjNhbBgL2BtiZqyclHkHD7WfXhd5KHyCdDBuw5qG\nLAwD7kh+F8s62X1Nw94IgFH2YPfxmv3C+hsauBZv6q0RS2d700f9+7gq96rt\nPbtkraw3xbkNofoWu8p/TQqLvb1CRSIUG+0PgAM1N9MB/3ar7PnTXoa+pBgn\nsSF7OkOR1iggCvEPK6vQ+FbLnOfrHjJkDY6SvG2MEj+WB+2T8o3sfkEoFXEn\n1IzDtGeGcom2b1RAQuA5ndafVCUu3JEx3zeLTbmoI/Mt8VAglWGNW/yiQZRX\nCeLc\r\n=UXw+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp8NxtYpcTQIDuaTTBy3bYiiBKB/N3wqGb/FNXr21kzQIgPBqAijzMkBYW4hz2KeG1z46OrbBwbi2xgeVA2bdpds0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202142035.0_1644917110735_0.37228890581954177"},"_hasShrinkwrap":false},"1.2202042210.1":{"name":"@bentoproject/soundcloud","version":"1.2202042210.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"a656b221ffc7e0c9f092bede5668a546628e9512","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202042210.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Qt2dQr/ZJBQsunENBgufR3FrNHe9Qqx1IgFWfhPXhBDkkBhRJceaQphMBaE7+tSqLGgwCFwyQPvZaB4SbhPNmA==","shasum":"d86770ef3ffa61696cf9bf7d2d980e8f9fe7da48","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202042210.1.tgz","fileCount":28,"unpackedSize":849587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC++mCRA9TVsSAnZWagAA/ZAQAI/tAN8y63Zd+r9K2M6a\ne1l/t8FalH1BK4PSOJhyoh8wUupLQUhcsQURrVqJPUzsnQzcvZ6FcEQ0Nmvs\nD1JXssocK8/YkiJgWuhOBXOS0NUdcPhq0PqRxqubw8tUMvitZ0ehr578sDoY\nX6r6Y3e3z4H6ERhQ1a6e8qV2uJ9mK0yUTvfqIE+QueEydV+4E4gGng+SgP24\nY/Er2QrqSoDqlUeHy8RFCfKuIZKPmxUxENXVAJuaOrB57o84BZrXUUxKINiR\nDPxInJGoPjJ+i/xDMs7SZOVf32Kd01Rj4+UuIdz0KernaqpO8eT7lPX0hvdk\nKtBitY8gugnifL2O22dgt+D6PIXmzZd2i3AH64bm6reOfun49cvMEosVd4Kq\nwAztOPE0p7NJKcurLKQhxx8eQGtZtKUdk9WDHg1pcyM5zXUfzrCrHY9jSTrr\n851c1UxH2TrVrS504dp35FfFa9SB8i6VL8+I5KtNk9dCSFrYHraJBnNP9Vx3\nHADv23OVPiLVPj7ioFCqkK3+NagyyrCK2qMzqT1FX54DV5mqQUMWRt4GCMOf\nR1mxsMf1CVmtrDtu81MoDQTxGLyT4s+iea1GLNACqmeXxldMVj9Y53ObVI33\nSJNBXRa49qYChIZFsz6ORsI8GCiwfXBWu92nuJk/rt9Ws/5g2sRL1S4Dee6w\nt/od\r\n=//8x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGfqZPn3YXWwTwn8TSTfSRU86Pm2R2QOoN6Aq+S5YVzAiEA+6sJs2uySh6KqYKZFG6vEISLeMLIXH/ohovu8AEOOP8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202042210.1_1644949414499_0.12977848544109283"},"_hasShrinkwrap":false},"1.2202152253.0":{"name":"@bentoproject/soundcloud","version":"1.2202152253.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"a50f1711cb8aecae95387e7f6b1fd1862206166b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202152253.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-oYDm6dx2tEkvEt1ffGd/agjO1+RnLfYV7fGnS6E7AZKX5Fxsdv+VlguPKgqDi72ns1zQUsA3iCy4uImWIySV3g==","shasum":"a0cb7eccdecd13ccd0981b00050de84632e2b817","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202152253.0.tgz","fileCount":28,"unpackedSize":849086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL8QCRA9TVsSAnZWagAABiQP/05SHHvdmXsv59dXH17k\nDSseurdlxosweUK6iJbhTKw4R/PcM+B0APiI5XaXQIxGCn8mH4ayypOrkBYr\nV4WzmgpbAo4MVEXr4YzKUD9iFI88EGtWwPRcMmSazInPtF8I5ByPwdaF01wf\nmi1MuqNisv2Hv0xL2sC1b86CDcm3XpUWd7ag1uHkhKHg5qgyNgv+VivLlRV1\nAPvI1HT0OxREZFM0WBqpq3tzHVJaOj3LvO+CF970qWW3rDc37BOZAC592kvO\nACDrPTV/N9N/O1STvRaYOqXcpdf1Xr21GIsGOX5xLFWYLoy7tpbsKVQgwl0a\nYToncVIJ/pHAgJmCgjrrMesfVmHOyj/WWmwaQIXHVzCavg5HDWc+nzT4+jar\n+wJfVa06/B7W8Rg4agegXA8Af0Lr7TWMBWRvlpQvtO6mS8BQFCGwBKIaYBrt\nIkezAYSmZUj2ijt/wO7Lo4kU0sBJAMBalHMfHgPJgOKAJDtRpVdcFKEX6Y1x\nCNuWhcc/nTlRvYrL8YTrRWpgKd6Eb2E/Pp9ERenDdydAQnsQp6PcpqzNXYIu\n6ALTnU6Ld3JpwlDwYAxuNF00HVqcxzwEBx3Iqgol1Pf/0418PArJyZJ0xH6H\nGcRb3OZ+XDrjvX6FlaO/BFTstvgCB0aJVC2BYSugZY4oycRqmcyS+QG33ios\nrms6\r\n=yuGL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjcFRGcq8zaAhcR5xp3MbhVEgIZkPGbhADUjEPAkb+4gIhAO8SnjsTZ0kWTIoJhfUjKsjwVRInMB6wOiAu0qzRvyf+"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202152253.0_1645002512584_0.5382946653093772"},"_hasShrinkwrap":false},"1.2202162256.0":{"name":"@bentoproject/soundcloud","version":"1.2202162256.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"7548b64f77fe070829e46481b6fa247b8813958a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202162256.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-pwR8sCJh/5ad5JQrMyB9vuvmszbIE3p+ilWJF/mI6+ni3ajrs08/dt2i1SWOXCgEqe4A3GgzLe7RMp4oB6IgPA==","shasum":"859c1724738098cb77fe8cb1d975f1369f0cb542","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202162256.0.tgz","fileCount":28,"unpackedSize":849086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhX3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6jw//cljFbBiDOSFOgAj3w7xpsmLr812TbuMj8S4BI0zCS71jrQfM\r\nigCJBNy7f70qVRHpByfOD9rthyBOP+cG6Nc4na0txrE0w7FVVX0DklLtAno/\r\nxxoMd6QyVlsxC5PMQ9KAKQtkP0lltUU7ylYiJ8J3tVcEQKenCyaN4N+WLsX2\r\nu5OgHRNOTGY1d9mrDTvfpZo+9Sf0+RbOv18H/am/7gvTCsy4VAlsESOUVJ9p\r\n5Cw+URKSqqmCiCw+ZmI06pztdNlId44iDzw41gcilyrmR3N8ojoXI7PKDbOH\r\nV7AXHink8kWFzq09sd6xKXNJIkMHKNWhxv3Cbfq2yTv4YVpeOVBbUcaXbBHK\r\nfL2Y3umHjCP6OfMH3kfEkYWuaYJbxoz4rkkir1dLzlj1g2YdSmCD/vxJLJOy\r\nvZCKx31sIcvvala7nul2MJl+aIDkr2iyX+IlJWh7DeCoP9ObnjjBKfjyp7MH\r\niZhaobc7RVgoa0Hk3QyLf3ODqGGx8UkpUpldJF3nCr/TkxxrT7/ZDdqbn+Zf\r\nKJg0pDFLL32798hUNlduGYjUgw0JYHBn7eqLyDw0543blYOzDUNyT1OgRp/2\r\nr8y9+Jmzc9dLibc1RO9xUWJcKz4LjOQD7PBmYegppLHoNbTArAVeF/YZJdgd\r\ncrDGXNDppgdnKP3oKkrpVfGYRStYV/gSId8=\r\n=o0gI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAOspvPmi1O8LcO/g3l3XVTJ9vV6CLX11BOgBb8428OgIhAN4ra0Q83i/+x68H1A+nvw4A3Yt1tEHc2pIOxJBS4Dqe"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202162256.0_1645090295256_0.5688816722667234"},"_hasShrinkwrap":false},"1.2202180255.0":{"name":"@bentoproject/soundcloud","version":"1.2202180255.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"8708c2591965df37c54fa25ae829421f10de58aa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202180255.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-fSGxhwl8VUmwLFDPdCMXR1uLIi8Cjcb23t2HJlGrQaDlfb7tbpCoPF1jBulJKQqeTq3R2Fr0j1mh3mrurHepIA==","shasum":"dbe6b6c85bf4fecbd697f103cca315be760682c4","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202180255.0.tgz","fileCount":28,"unpackedSize":1791024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD2qLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7uw//TtqTG6l05EAQRTiFy41QIY9rV0+8L7lXHAZqvuTwjv/lNXpg\r\nHov2aiSQ7zo2dbOcaAjHLSKclxIwLNoCcYFP53q8nCD2jbJIWgVujB5hvoJZ\r\nlmHFZpPn8DetcvlMoF4Gph4/MwZGaeKsFUUFGCVzKKVRMRVjdCRE7URsyHbd\r\nJ8x3GdJsezhDXyLCWGavz5GmP54lBXBWEEs8x7Lo6fbYnjfERQS8dCRJp2/w\r\ndI6LcI15l7sxOECeAAnJwoEpfFwQm4OQJr39il1t0bARBIxTgBccAB8AAq4h\r\n7kG0T1GrRuVYGDahIvlmmWNOYvGDBXxdFooioetUzgP6EMNL3ZAs58Aije+K\r\nB8/oaZKhmpYPQqKEBdXM0SC/mRh2UufdDMBHgv8RN7Fu5lXANu6lnciZ4cHF\r\nLgyR7hXnr81iFuXQEXU/x7KOXDUXZyEeuAA8sUlXjHfWJZRoH9F0HVre2dEM\r\nr/F8EZvJuH1HJaGb4zz9SUgpeWWW5n88nKP/0i4cvMOvSsAkgPZiHeuqYjzg\r\n1lJomTwts4DO/uo4qFG2h9pxDgSetkpQGgiJTkm+TaY7mh9ePyZ76DOcAwWm\r\ntdMgbFkSqWzfRbymJ5R/g1DrEYK71Aa7BdjpKCZkBQRnRRvGfPl8p1OWHQel\r\nNn2S8ji1iSSsg1GRWXARiCvnA0Yh9lUahew=\r\n=Y7zv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQUCoc6iUHT8SKq0rzG3DAAQKDIynUBCDrVnEBcLl0tAiEArMohTbF9rHvyoZQtCIj+c2sb1RPFrBqHVpNceWHDXhY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202180255.0_1645177483697_0.7200962613277406"},"_hasShrinkwrap":false},"1.2202230359.0":{"name":"@bentoproject/soundcloud","version":"1.2202230359.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"02e5f5f51d0375b35a2a20b27815ab79d9767e51","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202230359.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-lKiADodXdzKQvo9aqK8yBfaPEvjizK6hgOGhHlSEJkFJrJrh52cRDrs619VMxvKhS08GqZ+p6Gb3MW9IcXxiCA==","shasum":"083214609303c9197cc36f24bc15e5d4f67c3858","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202230359.0.tgz","fileCount":28,"unpackedSize":1791553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFf6LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphIQ/9Ha0IrHlkWT822tYEe6i8LxNXCatcFcno07reL+p3HuPqDMVf\r\nY6FA5ycpWISPxjMs1/247lvVZfAjN+7OcMJJXVbgvSAE8ngJF52ZDXsZ+IS/\r\nCNEIjYO8OOgA1xR5HfoC5iJ2zhw9SViERNX15gQ+7Ssu0LAhNQv2izYgWEDP\r\n9fbz8iqlH/LTlEcJwxC+FMhCGfXBKHafS4uwaGIQMwcZJNtyXBmcNd9/fvMw\r\ntPx2WjSBx7KQLEQiOjW1n8OhxbUj7uepeZ4sIlZou9+3wIq54no2qnv4Cd5e\r\n0vZ5jnAO3iEAdN806MsmH2pPx7FifbKBxkuT65TU7CdNgJSXJVXe57Ro/+W9\r\ncq3yDRtsHe2MSFlwgDuFJuH/KOyyQfjfB3war9RFSK4WrqTxFOR7bmED9WVd\r\nxlqjvuT5sPQAtWuz9AJ40EBi9Tvf3RqmRteF0csgOpw3zCy1Kp6LoDtbKhJC\r\nQsK8MBaKQ0tmJtniFMfnhdzYLD3MEhjFRpzfdSvpPZINdx29+tRi4vRgDjEe\r\ndvsUXwWI+ZewQRv0Vx9AB1KVymD2vS60X5R6hVxgLRJvnbIWue7WiMiOspgP\r\nIxlDpqGTV53qR31dxA/CNJPHfWjh14LjhWUbcuU5V8ALvh5AfO/JXtWCvri4\r\n3pnWK5s6kRiKx4DhAFSRlx3kOS9zdDFV+fM=\r\n=D0oZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcF35EGs6zqgDQ+4U5QKGwOY2iLX9PgQKwIhXwJZSeyAIhAKS2+6tIR9T+mbO3JzsCmi5wbBbBy18fMHJOXf6Ti84r"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202230359.0_1645608586769_0.4699221724883522"},"_hasShrinkwrap":false},"1.2202232232.0":{"name":"@bentoproject/soundcloud","version":"1.2202232232.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"66c8923bb334f4cf267bf8feebf822629a9129ac","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202232232.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-OgF/SLP6RlkuzsIE+y+t4DC6urb44NB2Kpnv1b7FmJDBL/r5CI1hjK8VGyzJErRaTylGyRPpcMaPbj4weGpyAA==","shasum":"7176f4cbd75b98effa4c401e44c47d3a50e5c616","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202232232.0.tgz","fileCount":28,"unpackedSize":1792157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF6LLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUiQ/+MuwPn4Gt4f/jzLVSZmdS6mtceWCXyietXss85atOjzsd00wu\r\nDJI/6KJ2p7ECM/L9rTjIZfal61/WHuuvpLeQjrLf+gxuLMvbDKbiG5HvCvof\r\nyimLyyouCT8TXr2XWQd+iQrCiylh5Ze6vTAfby3/XkBWZpzH7PCRbPd2+3FQ\r\nVPNi7w6QGiGbuwA7v/MIMdm/3mIER7ykESaZ4gy6SdDIQ3EzcHZH/sK6RQp2\r\nIU+TXlMLqqLDGH1QzeCwGwUyN3Gt0knl6oqIfUdAxO8czKooEGwsfowZ/6ju\r\noY7ds6kQs52ou9fZDFUADlPFeLZN8DN1uUrOouFHjFGtx2MtVaDatTJmJHCy\r\nwv93AYM6sw9X+RrR3xK5inIbF/wFwwbO/XKSYUHIpxPM0oJ3PmMupUAnTran\r\ngeaoL/yMBSy8h/b3L2cNb0Qak+ER59G1txVhMF+CTnVYM+UtqAJrbd5AOQTO\r\nNoFAN7bOX1t3+PHxb06B9UY2jJUiasCdLZuL1PcXMoy75wWVANjjPP53q2zZ\r\nOJy9JjJfyIG19hi0L13oH36bh0MlwvAb6Z6OUU36zaEH/hLWYhag1lrV19LC\r\nkg9hThleGZZ5882fAXruacWYGLQW0sb56oV2CgB4v1TitbhAjOz7gA4jhiY3\r\nsj/b+fa0NaPh363c4FSjCnRBfJECTH6z2kI=\r\n=cEw1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1YLq9LVzfmWk29LXgRi7EJ1ZwUY3cEm2MKrO74OkNAQIgS54P88hDCCTwQKX9/ZQAG/o2uKY2EcPOYJLVTj0643U="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202232232.0_1645716171304_0.5670871999611673"},"_hasShrinkwrap":false},"1.2202241911.0":{"name":"@bentoproject/soundcloud","version":"1.2202241911.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"d0f22f13b53d3b67847e18749e07ae4640258f87","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202241911.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-8k9z39BuyeMUZNLbpEtjznQe/EcxMDv2OAzSfGTJ2WawYWQjXn+sZMiKpw2KWxcU2ZgEkR+ZoN/JC9oYlOB0xw==","shasum":"0759b91734611e1600287430324c95181d4605d8","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202241911.0.tgz","fileCount":28,"unpackedSize":1792157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGPMqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdMg//exJfGLHAyIA+/9PBO44uBEWvz37CMFT8snXCPbUPnKji31Le\r\nBrgXH9Rca8CErXdGQdc8l892rGBihQYYOATv5L0YzVqggswE1nn2TJiwjRzK\r\nAwucNiS9Nu+aBqcZrjMiWx4/CRZ4ErQOZbBgf+6fc5RgOTG3zJUNo7EX94cv\r\n6IXcCC5hbLDFeNq+kAZyjxiXfUZCjn6fHwoPkm+Ggn1OnMKjLE2WroOBAPRu\r\nEBi4MptaUx4TaQ/EfIJWtXGRb60SRfQcfQMBAFofHKtr8c4UHejd2o3nR8G2\r\nAGqTxilFoblbVgatSZQUJ/5m7HvjvnS5gX4/tD7Xq3Ywapz9V0olDhDcdAB7\r\nBwo1Y2nkOGPTyr/lKeuir5zJzBREVlmf43UbJwSnFqC8h6dWC0N0Bqd5HmgB\r\nbDC9Vpcp4v28FxMyWlbLk+kIF0c/4Y9P18L2NEWu0x33hq8hYQG3Z60Yb84Q\r\n0ZiGz5SakhplIUYQ3j3CE9CU1mL5pmffkDejfRt2eHucPP/xVfa1DDrBz4WT\r\naFV6wYewerONPutLjjG/SWQqTwMhaKzq7vZqVTG4ve5BYGjunqEw+C1b/j71\r\ndrND08yEgIYSGO8ExCHX+F/cGCu8OvjFyAHZkQyOwUZz9xeGKizO1iRoRldq\r\nqzC8nNOsLKJbxbk5v33LsmmkFCrEu36Vy70=\r\n=2IEh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEcxBdOyf11rmciO8GF702Q1C6aJMg5zPD6O5zkMXmaaAiEAiDyYeSYpyZ2OEKpmGTz0MrFtmQt3kWjChdspBpL5fKk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202241911.0_1645802282319_0.9904229863604121"},"_hasShrinkwrap":false},"1.2202252101.0":{"name":"@bentoproject/soundcloud","version":"1.2202252101.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"fa0da0bef1bacbbaabdd17ebdc31b018e6450c58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202252101.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-1rFrbjdHwsbb9+n+vykphwfPzEovDiaRenuMHoBLnRUhitKzsD4i0rRNMBeT2xHDIk30g5Cdjxf78O+Wjgox4g==","shasum":"51a0145b847c44e5dd392f4b4e568ffe251d90f1","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202252101.0.tgz","fileCount":28,"unpackedSize":1792157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHPxUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPbBAApESwVNKiZDFLiNzfDmsj9+7N91eNDtE0tL0wLG4b+ej7zar6\r\nfIloMTzAp0nerF14wZY6KlZOccyKqjFGHTcmofyLoE5zMzXpf1R989xZZxyp\r\nRIKY23C60knYnal/dwImCLd/lGIjOKIn8+WuYLlpLCSAzjEVc8mOhcZgtrBT\r\npWsMt85rMq2upB5DFYvWG53I3h7Xk8jiHtoRqbfT95/qv+of3ymPZz8qIlOq\r\nGCIEBMiOPuH1IMWqdCgwNOOc6XxTCOjJJG2ZXTLPJkuj9b/ra721J5nwpRWp\r\na1BRcikexGNriXJ7ZtKMoHC9sN/ig90YZSYp869DvJgfBVQlbl5BpNdK0O6i\r\nSSpYYQCtO/fjz3TRCJm56tk8lSJGq93IN/Kr3YbdrMbexWOkAZ/j/UwdVTzf\r\nAf45/GbVzy5KtVAB8M+7wmK1A33ab3F6doHC6L0RjIBtaxFTjreP/YWZ3yOE\r\niqSe3/Lny084J+lBGt1nHwREIMg7uPBKpE9jVFaC2ixszxwRohqo4lEvvHlj\r\nMmpgEkFfj8gAKB+3We1CIDpcUPCUZ7b121zCStA247d+i0+PeETL4JChZZ+X\r\nCf4peYN9UM4uFiGBEE7efmig+Ow9cThGtn6ttyxDeDXDoF7tv8Ay5kWO/SoP\r\neKjyuwEBeKrUhnP5hhGlyUS+xe7KXZQjHd0=\r\n=hI5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpuWKkMZz9bqfg/vBklzb9Ar7jU8Irukwizb9m1BCCVgIhAKe4efhdVcDC3QBL4mZLNCX1wThJtgVppOo1vdfv5IRa"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202252101.0_1646066771843_0.47429874535670224"},"_hasShrinkwrap":false},"1.2202230359.1":{"name":"@bentoproject/soundcloud","version":"1.2202230359.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f459124bb58e0a0d2076f658b8fbe3c9db13a04e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2202230359.1","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-ER1BFbfQZaU1tWzOvqb2axDG7MJT4EoEzvfyn+1GbPUdKZLHBjDTASBEz/xAIciicajpbs5UwWMJXNePkl7DIw==","shasum":"4b3e52f8864a4507c0250f9099e61f9c349b051d","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2202230359.1.tgz","fileCount":28,"unpackedSize":1792157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHpjCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3uBAAmafdw6NcuKOX34KsX9ycIT2bURLN1YkdrUvveJOVE8iOTeqC\r\nhG3+AmoApszglcHpehPbUWKYkyrPmGcW7CUkBCmJ2x3evbv/emAWkyXnzqT9\r\nejbC1WNF9AHwjzXTF8ARyP5HrMDa7jkNUQFxfcRvRyO9Xw4HBrJ/csl2UFM0\r\nHxhiv1fYbnfBt5CVZYgPR/jv6Djq5nKsyfQNZNqiTLmRpsskjLsxG185uW0/\r\nIuFKrB1Y3ZXi5Z9KanOB3F3bLnAqvX/9U9Q5xLUmYKUGms5QAN8ZdfwPRSB2\r\nctTf7avUjAeZLJGFzqDJYiiOZOoK0QLGKPhWUeadzhoU2tJihtZeoVqp/kAv\r\nt/JHOqqtA4vc7AV/K9nfbRBo7opaYF6TGhhyVFnkmEFxf+T2n0rAyvy9E8Wl\r\nYrjZdfCbM4i5Fkg7QT9ts7n85gN4dW6ohlTH8QIEY76+PFP0YkkUxinhfvrH\r\nhfl47hlxLEXuLptjQWftiJNiDshVKtGwMqNhYyP9EOhcZ/ifVln4Bd2GTCLz\r\n5Y11OMHV542Pp9fcrXbiEN7wQOBpAkHbhrxp/H88L5iT7qou0L4daWrSuT/H\r\nUwsfuZSQT8g1FnxvNk3h1jdy0bC3faEDt/O82nmRB0KXIuqHTxgPJUBFnkaq\r\nJxrjLXGO3yw+zy1n6vUY3JYoVuPQiNN2diQ=\r\n=+OtO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiI/5PX7kb2ZAMO/h13VtojsSq5oPNaFDd58PLDo7VqgIgR56McZ6MUGbmvwryP7Csp9Y6AuYXr5G9Akg2KxCQ4nQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2202230359.1_1646172354484_0.14022986702152762"},"_hasShrinkwrap":false},"1.2203041950.0":{"name":"@bentoproject/soundcloud","version":"1.2203041950.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2203041950.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-REFlWwQ32JZz3hWTq9AU8x0mmcl0FAEER6dpq/PkfSTZIVouknSS+m48eTds+ph36dML7fNOncz+URYQfH4fkQ==","shasum":"a385010a0ed23fd1f5cb5f9aa4fb8cce1a3a259b","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2203041950.0.tgz","fileCount":28,"unpackedSize":550192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNz/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqzxg//eS5lGv9Seqkr2hWviU3obHph5vIj1kbdluTsyEmqT4KjVGCH\r\nZ77WhTLU7XAO2yuk8UNHLdx4oSBw4g2hpMDhLD5YEQsMAIpAJSPvFYiJva4B\r\nIHeEWRM/+foGFoHKjR6ovAiqszonNEdC1Dgih8d/Iy/5SyXamZPSivH4lGt8\r\n5OOXkFtAFjD9tG47w/C+GADYFCjsewDPgkAvUbrT5bCjy2oTffhsw4qoFasy\r\nmrosuSeeMejyhgn1MAUTexD+eYEIzH6JUboxieZ9Jfvo+K3fXnrggEhbNLsx\r\nfxc+BY7ptzRj73TsUOvBUpiLB2rdCYgKyWjUmua70D/gOr0UW1oTBQ5AsAjI\r\n3g4f3NPfztEjCQqkK5opKYJsTB6Krgyq9n1mLZjWKKlYJUjKdqut6DRR2DMO\r\nAkZejSJQN16Ol7U/oIHzpEj8B/oxdB85MilZjIahScPGqdcnH/EHQqt1h8Z5\r\njoFmKj8sDf2my7WIeoyFx+8yotwWnMDfrthcUhP+TDI4/8AmiPC24xCHjca1\r\n01+KbiVz5UzEjlY8m00iEMp0HHAeaaDzrxe1j06E2sQDolbcctlAJAeoPwMY\r\nc3rYSLhzsB1bU2VbMG0vh+SUkELdiNuxagQ4pfZgjSSUgk+B694kdWPfClRh\r\npFeYgvBBbpJytSSo0TrndhVxnQyH8+Js/7E=\r\n=UotB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8sV5Q3/ka3JDv3poifqgq19pKPfVPxI8n5kntALObVAiBwNkwIGyskxsl8XbZDlOJjEebPq8MAqYNd5dC5P7vpgQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2203041950.0_1647369471701_0.18365713548027207"},"_hasShrinkwrap":false},"1.2203151539.0":{"name":"@bentoproject/soundcloud","version":"1.2203151539.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203151539.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"fc739c0d339dbae236fa53a87188f5f7ca58f25c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2203151539.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-Rjs4DIgFBLDu/uCsmFEZtlb/jlpoTxFK8+ToM/fnz+7EW+MZpHFneKrPAYRr0ZFnb646B47+UAgcX5CjFVBpkg==","shasum":"e5bcac4d134bedf8bc7522d11ca1b5d0cbfb2dd9","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2203151539.0.tgz","fileCount":28,"unpackedSize":550192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZ6HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5Dg//Z4OFBMjLxp+v8KILBSQUo7HJblWYdp9/+DdEaAfkATAfMtVH\r\nNwA29gCFlb8aWjIY/GRgCmZfIBs/gTfWAEoymoTHobX66NQwMaooJ0ff16MW\r\nT+aniIIVeAo558noXFAcHNE2Vg+xf+VWDaE6EQEb+aBCH5jPyyO0Vq/RT3jo\r\n1MoUp+A+5pFzW4fk645dugNU4jSJAjWpPTHXBanrpGTHM6BatvVGhSex/ASJ\r\nlzql5rMoTfDmDXDhYh1M16+MAY45sMMZRGP/FibCajLDJful/uhmIIerZc/X\r\nzhkhht5d3OADaBV1cAOY3rWs8ptc/Pmgktq5fZLp6BNdZVsQqOv807v3FUKi\r\nIK8O9Re8MUN/RUwxYVGyqMIXAn3S0nVnc2vSSMWXRA2hdEowTxWujyjvIZFo\r\nWS6kmtOVyYrULsya2fpNoSoTcNT4gJoDj0bf0ARKsJ06bHj5dh1LBBYLf1ie\r\nFz4MrKJjVOloHl+MK+NSVR26xSHd+o88pg0TmXCH+YyNQxMctws1/jBv3vmD\r\ncOQQh/iuE1U57o1iZRfzj/PR1slTByhKA6q5W9ZXe6yzeC2+uzeAgF8f7261\r\nfpHoBvfCsLZ40+eYnAkjrwqt+qMJfu1fQzH/8QPAP5F5TYhLDfAWvbC8DhJl\r\nkXzEAIVUguu104BbyvRO28v96sC1TVLe/NM=\r\n=ma6a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuL0KIo30/n4MtQmDPqOt1D4i//rTtRXPJlwRo757sBgIgEZ/vBb7HLxhLMlgmK2EapnxNZabPYJ12bFQc924fR44="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2203151539.0_1647419015466_0.8129286793815949"},"_hasShrinkwrap":false},"1.2203172113.0":{"name":"@bentoproject/soundcloud","version":"1.2203172113.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2203172113.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-/8SQ7ynfAJ0DhJkhOIDZlrMhEIcP9xmepCc46zWT9/j4cWrSWIYVYk8I0gV/eZ0pqXWlgW49d7i2TrsLUA0v3A==","shasum":"e17729e6c337b4d764c8bbd974bf8e94d5f15147","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2203172113.0.tgz","fileCount":28,"unpackedSize":550192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNEHcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG8A/9HXBBCYiRd43kG3CHcPwVVvELSNIdkq9xUy7IGwjQ65gIgupU\r\nSxe76tb3RAVNk5SDxtqg0OzEbencoHeQGHzoU27a/mj2w6QqjR++sJesdxR6\r\nuTmNFETLChE4Y9ZqY2y04hq8o2IQCQNzBYfyx+bNeImaYzM0MY8qiIVE6NsO\r\ncfOIyQitYTvonGXC6iVh90zf0J8FbKR8GnrUbJkBysY7I3BYiZTDApQQnmCv\r\nc43kOZT9G0UoyQ+FjSF63f8fLIdzKkoM6TCoi81rRGlM/rtInKlY5O/hsu02\r\n8LXMMV8k8EoQXMtfsBT23uL3r2Am0yVKhfx1Dnv1OnHIzmzNtSgo+UARBdNc\r\ne8KwNrD3NALbArpl7c/XBaCMpHdH7CCuJpLAMM3v2qDHbiQYZKRgX3diIaDz\r\nYiNP0tUP7hhjGWz6qgfBx1EAQctTTrAfRpYNic87Pwyw6kAN3BNOmmHFa+s7\r\nDnC2i73MJacTWYMoGmyMUDRf7uwRg9Un3DlQcHQylbfMU5e8DWPGkx/Ckfli\r\nuYxGn1wonwugSQncA3MnTuFuX9v+9dPKcnAbll18cOWt0h2lSD+eg1Gm0Hdx\r\nIJ9FGCzE+YzO1vMs34Wia6+Lu196//a59ZSGMrDuDpnet+QKLUJC3oNiv4vy\r\nXazlBaQMgQTuF7+cAoIWcG3r18jSAacoP2k=\r\n=fmEJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUvtNgW27o7AQMo/soQgaqrwNOroLNdDcOEKw6hKNARwIhALzq61sM4zJrr7l9xMnkraTDNOivXliAFQLusoilMCCr"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2203172113.0_1647591900562_0.5115387900225727"},"_hasShrinkwrap":false},"1.2203221937.0":{"name":"@bentoproject/soundcloud","version":"1.2203221937.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203221937.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"11fb2607ccf78c526a38e31bc141dbd3ac75d326","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2203221937.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-M60TIsRs7mkKh4mjGXr9On6g+/3wz4MCJG/0LVoqwkg8I79nG5AuLSG5Oh4TLpeq68I3e6bek+Og7L/2rumHFw==","shasum":"e19aa86e16b3e2d2dbc651b71b4d6bdd2ed50a66","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2203221937.0.tgz","fileCount":28,"unpackedSize":550192,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOtnkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF2BAApCK/WjSuEMtcFnX9zIkvJ7U8eXTTwmEkCFXye/fYXtKcJGT9\r\n/5g4676gV5+5OTaXMaC90U7QqwD5uislZWKwZ6vJg/MIhMaNMc8Hy56tBoRn\r\nP+kLfRawiDPvHyGs8Z4cVhzalVaEIu6mYbq2lMupUPQFlQyuBLpHtg6tYgZO\r\n4H+ovrWl7ohB2MDTuXCikkJRja7xVnRE1PglMkElrAzbadbwXFo6kcKsnKrt\r\n8A8WRXRUGq/RIhWTJy18h2S8FAXd9gBCcjZRXEjC4W1Ufu+ac+IouNo7MlOZ\r\nlkTRYKR8qoq7+3YRbOJSk9jUCpprgR7jjKBW17ITqJFs7RyA1eCtfzaINp+6\r\nakuXh3Xi5wCDFUC289dQp11kNvVV3Lq6s6t77HNOd7jpwZJB0FIkwSgtGkgX\r\ngHAbkLvCQs6to15Z+jtb94aT4G68YY8tfSTJQQoTeIUGUwmShfCEG7NoQ8Dp\r\nGQVN6EmftgwcSExfqCve7svrt0ayaaiTUBTh0oEcPnYSvXdmlahPuTEx6MlU\r\nPldcjyupGGMf5DGlji0u4z9tNYNOGYkihl2xiL7PwxSrJjqXtBfAnNlQl24+\r\nlReJLnlk4W7CKVe2rLln57gzQrh7855NudDm5BxGQ5OP0kw/z6lCVnMJ0r+U\r\nrRtJthb6fIPOjYhjIVACNELx7BZVvkXhJX4=\r\n=O31k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrN4vfGrC1WTVBeZG/FJ38IA/Dxu8z5e3pjUIEVY8avAIhAOCSXlSHL1MjxHwhhd9/XIZypyM9fzxVLzlmeznNdxgN"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2203221937.0_1648024036168_0.5542611050557951"},"_hasShrinkwrap":false},"1.2203231914.0":{"name":"@bentoproject/soundcloud","version":"1.2203231914.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203231914.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2203231914.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-pR9ox2M8wM1UVt3F1b7YMGCEs8vYDcRO7S7NWk9lu8vHwX11lb1HZdUpRfnMsTT5TF+YMDwGPxND8gPYlXY10g==","shasum":"1aa5789146ca66604b7257ac86452cde1d2f8cb5","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2203231914.0.tgz","fileCount":28,"unpackedSize":550308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCrxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLow/9HRK3aX4wMHuC+slS56naFfqR/gwsGwFRbP+imwkkayJKN5m2\r\nIwokGSjpKWBVEJXjJpI4VGRyNVwPJMO+jToBM4OLivC8930EErgoeu4FyziL\r\nDC+vYWeDpzWIYnZemLnwzTAdECEhacqPiJ6d468av7dMBqIs882V91PdTwEb\r\nzkI06uFbCUB4zz7MVA4/HcmteASSncvpw/jaL9n9Urj4vwv3DY3pdrHt8MCy\r\nE3sDvOJAW63tFeTuVT7XUl6yIHyunkEsvLbuWCNsulaW/bnCy1yxmneOSFvv\r\nIRvGkbthSLElvHvRG9jPdBYCFBkAvk59wW5znfxr92O6rE/HvJQtKfon/IVe\r\nTGoTMGAx8sVexhoNCT+UioXTBQ/IWKAZXckiUbgF5uFRLjdaTa3a/ilIYAzT\r\nJQuT+ttRlLuIIpTKJPcZWXbUpwEf/dut4HoFgT4m+4pdRdQwuSkQbfdkZhBm\r\nA9PI6NMn4mxsz5moFToLJCR3MtRE3hDP9MyDmizY4bKlk2sqkh5gmLc5hy7b\r\nMHwGLRAbmaC7eMPbifZuZgLvEEiOVFqyWuqCZwcuUdpHjmxiZB4OU897gC4x\r\njMTqi6Un67+TI0ruv1uCorMFJalCbIiPcN7trx1cG4negnupgxmWbBn1aILC\r\nyg4mr3mI00SnQtMXJ4s8i3wB7Q8nFQUJ4Mg=\r\n=cxxL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtL2EW2te0VKF6TLy2QC42Ek2xXoPFrleb6LJDG/dM9AiBGG4yRvOvcI9XPok3wpoTcn7IQMnKTy67FJkIKRQG5Ig=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2203231914.0_1648110320854_0.9537866922490497"},"_hasShrinkwrap":false},"1.2203101844.0":{"name":"@bentoproject/soundcloud","version":"1.2203101844.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2203101844.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-BymZo/DZztWo7bdJR9Sd591Y1psx4Sdt7mlsPunFcyiazKMHthn5qSr5lBsRW7t7P8fqwDhJBc9yKh9Xgg2/kw==","shasum":"38029e68c76b5168b4d5df745983d9ccd28984a1","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2203101844.0.tgz","fileCount":28,"unpackedSize":550308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNCBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyShAAoDuxqIV6trrgRJEq+OuDgs6JrZF8h59lGhC4pXfO8C6U9MIm\r\ntPQx75rToPrncyMK/KcieE0iRVpN3wh+HiClqo154IvbINIM869XTCevoX+G\r\noxnoTn33pfEqkblsi5lVGhJsci6FhOmQf5EYvKJJlZzf3ifo9eKqVtKdpn8w\r\nMqcsRPDTKPFJC7SRp4qabTqExurHPT648v0JYLMPgDXJyUH0EPjJS0szBoN3\r\nYLUa4qwTk0cqeibhUKBg3yeqssB3oeJcWUyRX+lnotIBJXw4pv1ik6p7dMxG\r\nu67oOrvDJETATJsocB5OeK+/SFV9xbZLDMpE2eznU6jlLAuowis6bJVoXYVa\r\nKC5TZE5Em5yO60AElHbnjB35vlYJKWfhrEhsvF03crWWjJVjut0vvZXUdzvC\r\nwPBcezZhVgbd5g51mW6e13hsFUJNpFho6H2gejlJLzJYh6pa5RjcOjp65ACY\r\n0Cvm7P97aOgDQQAayBHStExFy5vddjHLC2IIiS1KS74i6OLeTbgFLiZgJTUt\r\nGOrTUyhjss1NWwb1bKIj6ot3Z0U9kJYf/n0Flu48RdXwOXpWCX5xp71ABBdt\r\nOxcGj+U69r/ByWWPlPAlfjoA7EYoU33uUEri8e0OKywiY76g5+/x8Bqnsoju\r\nWqZGD3xt70LqEvOxRkT3idgdX5CLqLOwBS4=\r\n=97CD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAwBemLHHhhybDljk4fwzgyffzslU6mcXmO197k7zHDFAiAl5Hhe6tbIdReiBS50GQoU9PAP0hb5BIfz3XoUBqSI2w=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2203101844.0_1648152705238_0.30882126637815843"},"_hasShrinkwrap":false},"1.2203281422.0":{"name":"@bentoproject/soundcloud","version":"1.2203281422.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2203281422.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-SGOfK0v73k/U+p10tsbo+vo1m1h3DRZF7nHI+Ap3q80PNUjrNbxU8gyCWRdbDiBMJY7r54xpyNuAtt/Y8xNoKQ==","shasum":"5945b5cc687b9395dfaea60fd1bcf5054319129a","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2203281422.0.tgz","fileCount":28,"unpackedSize":550308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsOgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxmg/7BN9EZTLA0umoM58eSDYOHP0NaxAm3+w9TGx/L8T+5cMKLgrb\r\n0GNT5dQOc1hLAu8TPaniCmB7+b8HAs/nvFFMGysIRodCkTYRnVFLGk3zG0UQ\r\nRK6COFHKhp9eh1/MOUrA7cEvQm0LRuXQt2lZjOtSAqsX+ycwpaEa2OM4cnMK\r\nxcjFAzQ7rqs5L8VVuhbyTWMn2yOQvhtebsmPbDxLbjLTOy9078gUbHS+9/Ev\r\nIL37ydXyhPSoSOE3wLjdeRga7i90PJ7GyD3/Q0/PPdc5FFpHBP3ikcupVez3\r\n6TXlogo77tpPokT8338GyXBCYup38NxuME9vVsptat2BMeVA71uXl1nrHcHj\r\ne73Lf9BUVPiCiU3XW98w8QkATOYHceBqCO6v0aX21spwfPnVKYV6bjxyMxvL\r\n8Ym7NaQTTKFuJNwvWBtCOfd095yVVvWh27g6lH85uJ16zgfuNv9SFM5h+iIx\r\nFMe55/N/tH5syTQna2HywG/ifbU/LDRbzb/BSt1Mno/pVpN/hWtmdPRw5Mwj\r\nkSGaFwhGtM6mamvildvMgL5VIf/XlHoxWbzOTpd8SDjT9T56QNKdbJ4o98a3\r\nzSztuGN3UwO8Jc0+TSHBBy/71DI3wJy+4ND568Pk5InBgTBQy/l+3bXwx/34\r\nFDwZgExL4pY0dI6izkbNgNcEyOy0CXJnOw0=\r\n=jL3a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUy/3rsI4QY07qaxIR8TKiCRsLhCLkehsZQphe9sAFTwIhAKZfq46SYC+dDnOP3dJwVJPdBajrzXwPXbzUfO3/JEpN"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2203281422.0_1648542624478_0.19728304735100322"},"_hasShrinkwrap":false},"1.2204121632.0":{"name":"@bentoproject/soundcloud","version":"1.2204121632.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204121632.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"dce11ee1542a2d10e47b8e9875dae137f4cc1b0a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204121632.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-R6vMEUHvS8vkEb2+7uycsHCpg/SDNHWmO2IyMpofK33GZjj44ZllWNIrXBuKBeOcpcy4H13ilpLItaIoMtUlJQ==","shasum":"9ae3176da5ce7bc7f6ea3559780bc0db7eb444fe","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204121632.0.tgz","fileCount":28,"unpackedSize":546612,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4KnGg/vSzNs+pbUPNxu0h00hjYhOQ/5FD3uhFO2io0gIgfRUDFtOoPG9lZULeSj6BeAOqGIDVQK/7grmZZgiXSYs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVcIsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ8Q/9HmSYC1p0iYZqY4ils1J+c5JTPLear+q0nvYuMBor+qzNw/LZ\r\nmjJrnodtpsTH6VUArsUdjfY3vnphFv46b3UiYXJwn0J6HbMKI86JioGrrSJ1\r\nk5xLNxPWRY6oie7OiB3gex/LPnZSwCOR/GUqzfEHPUCYK1xtQ67VogV8/rZe\r\n3oPYSNzVlM/PfXvXyw3qJl8pS5ZpRR6Tctczs9OMtsz1zTBmTr5k16TASBam\r\nS7DK7IO9nyXH1SUNwNWYbB9FbkXp+1TlkDS7mZ3JbNNH3YjnJYlCkQRh/4nt\r\nsewWWxG+nSa2Iobk/UwkDRIH2S+jZXXmOG2K6GWVAerEhIA1oSfoz85ZMmvI\r\nTjNWjInKWJGEEUX8n8ri5lUItj4ib+W1MenCux9TbNPeYUhuA44JEWbr7G4L\r\nqNsqPUrsQtVnarA8TMJoDvIZ15WEiK1u+5LcBHpKrQazfUyzjy3PuIkA7U00\r\nSdoflWDdJQN8I2VUrHMMJtIZ0J3p7eQtndhJiu48aNIOykchoy8Yd8iVzfZ1\r\nqCp72PYkSKu3HQyDmYCEhXxSWZ5DbjNH8ypgw/jxh4zFJ5XoOoC+stzqeqZz\r\nK0DoCUFBjjlI2jlZqvGiPwCq8gFYy+IpaXJ/H9WsGk3D066s7m3lcEqCaqFz\r\nyk5tTDBuw+YUiDX5cn4vTnzA6ylXX9thGq8=\r\n=9A39\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204121632.0_1649787436616_0.46588673733406494"},"_hasShrinkwrap":false},"1.2204122000.0":{"name":"@bentoproject/soundcloud","version":"1.2204122000.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204122000.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"9d10200b5a9784c35ca9fa16b1a4b3078aab3180","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204122000.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-Hjh9m10Fq17lAtT6GL9j3T8uYcJkFSf2z51HRNLWigTFnSM5YVEjpc0f9Jeck1GEipEJfzcwS1DVYZ7BnWRCng==","shasum":"6124c9e8a48d369109c4c9abc3bfbc4d269940ea","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204122000.0.tgz","fileCount":28,"unpackedSize":546412,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlpshcoKP0UyOzYnGc6oc6sfi0myHci9qUqu2iuWEdiAiEAgiuzoc3Ftd9mXZK8wrXHDUF72IyoYJmmzS1ztPHLVak="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVoquACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMiA/+OXOYhVQkKoV0EXfTZojFZBQMhfnaQPNt4sPEdZiWK9LRqSb9\r\ni4kcXn6kdTP3IGqe4U6El5RWXVsAb3mPzDFe/cXvTg6aAC/NpMClHPaz+Zky\r\nGUmgA7qDDjszPCkMNCoGzcV2JO5K6Shdqr6lrW83aHecOAC0CaC2rBK0jQUe\r\nWnRGZphjvIIqK4RGWYo9YcTj4i5X4Xu/s9hx1HTvZjWWnvewNVwxCF2mvw+c\r\ntTkvzgpRdcbNxFu1Bdqj7ZGCaaz9eotzBNKo1tt9C3w8urJxV9PvWdNXgk9g\r\nW+5VPRMqpTAwE56SlUCO1WGJfqw5YndupyJzjZuq/5RvuUdhfkBbvZ5jlb6L\r\n/V4JFmwv9O+xrtNxuKpzL5TgyAgQlK6PF36+xNpeJChnKtMfMl2BbkrtBOx0\r\n0A6NnuzmUdTKVti7dBXjx2sz1xzpZhOdZ4VDASerMknKsFAe5hfSCyjbd4VA\r\ngSHJF0BvIc944znTMVbE3yd+RVmL+0imMHJbemS2g1o4fWTjQHYM8kocvs/F\r\nz+RU7vmm0otnlQsry6B3wV0YvlaT4qHVvn0VEamzUYK3yDFJjpV1O0+HGcz8\r\nhfr7yzdhoK1n/Q89ePujlDu5ODNpCPU/5hivRmlTM7PvgaHf9JSpM0sAv1/v\r\nvk4HtINsW7Yorol1bdy0hJfjr7XGmCJ6yug=\r\n=bcw2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204122000.0_1649838766511_0.4003472722453183"},"_hasShrinkwrap":false},"1.2204132005.0":{"name":"@bentoproject/soundcloud","version":"1.2204132005.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204132005.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"26ab90e1d3f7c29ac76e3fe33cdbeec9e828eff1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204132005.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-MH6vJ/hpPlrLMNLaA6X52GKYcC1SUUrtMiI+wI4ZyPvSmmDazXAneAxGLTquHg1z1ZZDLt1Idbykqb8WQvYr5w==","shasum":"01aff636a02b71db997fb7479dda0254049b33ee","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204132005.0.tgz","fileCount":28,"unpackedSize":546412,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUzBIN0NSaTjHjbhITQQDpxn1/aL6PrVGQMVag6WZ+1AIhAKCSHHHb9+MuLMWClFvTmCw8rvlQgiihAg9g+sRfNElb"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV9zEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4CQ//fZYz0lDgBE1hkTcMLl5J7aMzdPTzNK0tXmfQzgcyvIeqOdLu\r\n6JEIq/y4aZOkeiu/4xTpLNLrd5weeERsQ3JJH2T74A6HFLlJMBEdql6nMqZz\r\nilzBHtf/pI1fW6hOrQ+NVt/puegi72e+Awlj/MiqeXR13LQGwKV0HqpB9Wtr\r\n/POTNn449YzTwAz8MvoWD7fSUhRsf80x5EZCYfbyhIfkMYHzAIQoCAylw0/b\r\nMpEu0maiKDN3ZArinecVLPcArjuqxsnjVl82Op7FN+nis7mjwFFhrAy28MeV\r\nas3DCLAuf4IjWBzykR5XeSRSMMiriKbgv7I1L2wqDIHFwlWPjPc/ymQ+jhCY\r\nEMT0PpndihkuMTdCWjTrBFPBKEGxm6gUzfKpttmgzGNmFJAOWpXTdgZw1V7J\r\nEgeu2HY1TdZWEGs7x9pRjxePIf9L210TYJmxvQey0E+jBShxtsmojctCa3bn\r\nFTp9Rx5CZCFvLbchVfT+jlot1I3n/jzRmF+f0H9jToIzGAThcHlLxEtRv2Mh\r\nGqRwVhL6pw8PXOOHwUW0tmVFnQM4lzv9H5l9gh+P1hFq+pfO9rCTp2LQtcOM\r\nbHV585qpd4qS7bv04PltvK8h2lysTOxk0TBRk40rHe+FdHJ7sLrJD1/88FL2\r\nuddEhf33kQABXq6icnLFcqrWivzjxTU5+4Y=\r\n=VkYL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204132005.0_1649925315996_0.2584401977505746"},"_hasShrinkwrap":false},"1.2204142048.0":{"name":"@bentoproject/soundcloud","version":"1.2204142048.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204142048.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"32d29a09afd66bca55e024a4f21b1cdf6690cfdb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204142048.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-5R3XbB7T1fN71ra1MVm2NAwIyEDW6fygKA/rc2Qxu9J9uMMH5y65v5z0ebHK5j2d4SEJsuhmEXqK6waS5SuoRg==","shasum":"aebb293e0f601954ebb7e8412a8ed53691878974","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204142048.0.tgz","fileCount":28,"unpackedSize":546412,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9W8yDtYDPcuDjFJ9ijyx641tHYykdzxflT0evVZeEqwIhAO1Ik12b6keIEhSijmh5LLfh5MyZa4QIdnGU4EbgWxaS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWSyrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosEw/9E1Pab4ibDoyhqzNG1go0IqPwAvgdZUbCKFj5WhHsNFU1a6V0\r\n50SM4uD3EJaZcfG+ksc16zOc0D8C3qhed70NrLEImnqvLTJKuambBWUxqSdu\r\nK9UPZJ4E5b4v+uy5DK6k6z5smMASyRvKhI0MSZPFpFyIYgYzJlbPmdAWVgPd\r\n6X6FzKPjzp13lrAnCyXJXpfMSgwUCKRRsh8eD76L3AxKd4Wmt8vQhJmqQ2bR\r\nBFodvx5IXyyW9hbJ+3EFeiJiv+XMFpE/blI565P87bKm0XAareJfcMOdSoeC\r\nYNVJix3WDFYAYT0Yx02aAW/j7GnTHrGmKgsh34CgW5TwRa3k7Z575BfihDYI\r\nk9KNvowancNU75LVtj6z80Opi2+jdvIlW7uLpDlpRetYu21WosnhshGyH3Fl\r\ns0vT8mVs5nqfQcsi4H0pZOAzzuYq7YpBHKRRCG1VFat9fx0ulBvfdxrAqBXn\r\n3FOXkLhSb1XIxO8x3Jv5p5OntMVugfdTh0VvitvP5hWHRC/j7Ymusw8sSmKp\r\nKTcnpDvtE57Cp+/Z1seq0PAIQjgj33j6ZIZJFbJ1oo7e3wY9SC7/YSvc1luf\r\niMdrP+F2OBXAieQzquELrQ5rPD8/1JyCmEL9Tu/ZJo6UNq94Yn31WtvHm7Ys\r\nEDlVwwWAPJ8wq5NglGL5dYwkJpeQa1tEG6A=\r\n=vSR8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204142048.0_1650011307023_0.309168119074976"},"_hasShrinkwrap":false},"1.2204160405.0":{"name":"@bentoproject/soundcloud","version":"1.2204160405.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2204160405.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-WfHPPEbQYO9PXw/FRIbWHoJYFLwF1Q5QcEWeusJtQ4QAsnXrYstYwQ8z4EXGrGULn/asxhgsjfM4nSJdcHdSyQ==","shasum":"777162790a4fcbba1a7a47b51e3610d0a3e4f7df","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204160405.0.tgz","fileCount":28,"unpackedSize":546412,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClgm4rMj+gzRfRsZzxROP3pX6+5ZX8Qx/DSRafJkUSVwIhAII9zSxW+/8CJIPurfDhuQtq/36CKD2u5MtL4zwmsdiK"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWn1+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnmw/9HWsVX27NMPl65z+nAEO3RzZ5XAjPVg/DaZ2o2/A6V9tV1b7W\r\nZwvFN2E6hUuK32pP88jv8AURb6AQVhEz4rYBm1Vvpj35wbZ9CVT7GRzIZdgR\r\n4b3N0jSMjoOOixm6Wh3kuxJ+/fZa9OwrQ6uab3vOLAadCuzOhIfQ2VuvXQoT\r\ngnCRa4erZWKlw8jF73ItMAaGd9yjCLrW85zGp7YoHXepyqS12ncFtEeEHb4h\r\na/BIxNqK3b9hEmJ+RAYcTpHGeMLb8roS5Ovjj2pYIWAeU3siMawAEbck9WmN\r\nlMrZmWnOSs3cSA4ocroqXyQ5PgwuF8HIlQSL1VyxbidIaqFq3GNHszZRRifE\r\nMpRYWvAqklH5CjSBq16VhoxSZJe4ROAW9Qg5CnTOFwqvC6QiqNiyEZuqgJCs\r\n8aXfAO7iIflpinySnYVUN69KF5gY9V7R9SrhCRl5EBE7aO4BvjgKlMIWrikn\r\nWpbFi2PVfd83dJphX2hNIZjrpH2HBVASvmBKVKe1/n7HrO7cNJrUxzhQ/QZk\r\nRFZExBaO4VpFm6lAV1zOqg42OLWidTbksOXUMWeE2Fhu8OSj5DDOYDqUnpj4\r\nGH+DS/d3MqQ+bS59Y7VHSBCKbdwkmYpyFWpEwFFE6i39QGqQmhBg4DFE44Nj\r\nAUvFp9ufF4OKzV+jUu1agP5Yt383lGrC/Gk=\r\n=9Rgk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204160405.0_1650097534001_0.031067122544862213"},"_hasShrinkwrap":false},"1.2204182206.0":{"name":"@bentoproject/soundcloud","version":"1.2204182206.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204182206.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"83e7c80d7406923369ada8c1a7a5dc660ebdcad6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204182206.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-7BfTSUqcgA7bwDRnXCXE2IonLUa3ytmAArxIYZfdvnX6nzk6mudisCqqIZdXybzjGZyvAIIdTlyO3KiymLLzog==","shasum":"a3a0cfdfada6ecc8c2cf11249affe92da28ee3b5","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204182206.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHofBzJY9+G7k9nJvSZNJRgrPb3imtjZXg75h/G93WyoAiEA8oFHzJrAIM791gF3G/YRBWahy4XzIFyVebyTfvj6JI4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXnNxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqibA//cpJfjdSRdf7bru/faa9yjP53iRI0UlNz8ku/BnqLRJ0UqTFR\r\nrxNItUYorXUQmitAZQoGf7l9aML+svhn660XrHjFHQxfEDvFOAczrp62DbLM\r\nTY0Pbhwbeimt7xdQI1H1kVKq8wF9ssBNcA4ulcHamB0XG19B2SocnJtmyGrP\r\n9v8AjjRaro2Nds8uKhQMtGEkwamXrKFN9ir1Bg2HM1nqRT1+BvEtlCE2vxjT\r\nRnVCjkEnCedgWmDwaz5ENq1kG01NC91WlPpryvQXZL98YdjZNYHHkjH4nRG1\r\n7J+xl5mb/5VmoBkYmE3wYq/qgKgVfmS+B0a6mpiZ/gzHixC3zsnHKZNhxIks\r\n3xVVqMDSvEhRw1ArTyzrLDgvQ7PVQh4rf5i591Ru451P6X8ewNXdWD0rVMkq\r\nxQqaajinxQ90L2wKTtR7h6Rh7+ZLeJCMhmuKq8FTudUqgsThSkfF76dZidgF\r\n/Lg14KueE/fbya9YfeP0PLRqvAIw7MzK5DjLGu8NX5ZAF4AqSN11F+GZnxmx\r\naLzUhuMim/bWP6PyZl6RxXu9E4TUHvtdfk2k3ByVQiDtXH4uRSCeZAJ1QBYb\r\neRdljn74QQ+dnyKOKL+67DMHcck0Kt/xZphGM+qP+DNR2OlyQOyB5D/fiX6M\r\nIj7nEU15SNjpuQC7Mbsg+pLhajNbNPIwbBE=\r\n=3EAV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204182206.0_1650357104480_0.8798926578617907"},"_hasShrinkwrap":false},"1.2204191429.0":{"name":"@bentoproject/soundcloud","version":"1.2204191429.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204191429.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"2ef2d96efb4624b0ef0313b60134c9e35a4e8429","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204191429.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-RKHy3yDzrkxbQEP+cz0vDEWvRKMflKOI7LnH2f0E1UaZ0MOTCE8pkiO1sRnpRAmdQIR0iQiZK+b77nAMUMUvyA==","shasum":"ce4876d476b48e79bfc1867f5f3a2b22c16a419d","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204191429.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCikieNF0HUxxVtMB8iaDaKQzU3QmKBQuFZ83xyIFluPgIgWam8Ij//r4iXOjQ9g4w89EXVCY1Gx4wJRxN7qO+Sf5s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX8VhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoifQ/+Nld0lE20pzTT+4y53zksexI27AHhHSW5uA72xEZtZTVClWWH\r\nQThIWLBvHqXDijKje3huidoz7jepxWU3RP/dFvEEK39MJJYgoBrOSAlTvW3n\r\nKxJ5ZILALKu2U4TMmZq5ErEcsoOrLAVPpQOFqVA0g5DHMpGOpPeYolompo3n\r\nhCRHMbphWnpJSPbDQ/vEuICRUcArMyvhrc0T5BPyB91bAfwTLQlJLWCUT/vE\r\nyZNXwtQooEkiF435y/1J5IabAF0HmR4VK0KoTgpsFy7w5MMPRVK1rdevc8Cj\r\n2weU4Sauxs0fYHanP7pYz4BoA6mdLXcWc4xtwmspMRInU9UdJW0RCLJmWWnm\r\nsN5tnhoNOuCKEo6+ajGVaI3WzAZmp6ZFgo2symdNMYBixqugBXM3Z9Cf6gic\r\nRNGmSZotDC5r8PbeddPKA9t1ek0/Y/xV3T/xr/u0WfbRN3ELbU4tUTmu6t+j\r\n8qLjAOLN+51MqvCABHLryPXZqlBXxdW1o6MTdSbFPOjf41plE2FMwgcF5UNx\r\ndaGUCKdDccIfMQqSo4oerr2vGNHSSwQA91OmhoUl7NUUnvM8agiZOL0XuvP3\r\nJpGYs5B4nGpWbiyDDWazZzwPoNdZ38eSpiaPx4olZ+K13t1g1S7GMfPoAv4K\r\ngPJJO8qRer6ytW1FnTJCYpEpN05EHdD0LvU=\r\n=6Pm4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204191429.0_1650443616704_0.5503272718182928"},"_hasShrinkwrap":false},"1.2204211736.0":{"name":"@bentoproject/soundcloud","version":"1.2204211736.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204211736.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"01dad70364e4b2b9707441c2c8ec973e1547b195","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204211736.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-gUr8SZrTVudf/OoQnwb4nU5oImmlJ20bwDk1HLSTk+YGNxdDBKwzsJTEXndwpA7q0pMn2SEvS9dwPLJMFbtQGQ==","shasum":"601b744258a8e4541d85936ee9ee7b47d10d62f2","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204211736.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGT7q74y2934LZ1nuDZWyaorbM5cg+TlCFoF9JbVzG/CAiEAu/C5UZhw9jiN+4fMKtCBXdQVPBlOjUPx0R7ZHV4SCOs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYmbtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcIA/+PacG0MhDcZVAV0DnX+VRwEGRrPvpz33t0opK0IA/xxT4AKWW\r\ni3mVSqfyvgrf7xNGM1Ny4gIZPVBeVZOk6zxv0zk68oqzawYLiju0pMSWhRpK\r\nGTIfChTRVWpIylMKGCBR0fWfBSivLgxFe91yrE2xUIqXgvhh2oa1ZNuLvT4k\r\np44LTKwBikauugJ7tum/crf7i2nA4LS+EcIidIHhuWHgXbzm1NJS/L7xW1g3\r\n2VKbn8AqUTaYFe8Tjwk7agJ/BY47LkRxh37K1MQnvld7OF0RqG7WAYrzwFzc\r\nu3QbyEemIlpeANo39KhHQp2JofPgn9phH8ITtG/lqPvcVi2hEe22QqrE0KWC\r\nb3s0wC7iUnLZ3T3jPjOeGkFAwq1nR2kr7jorFNvYKeG28jS0adYeMkDm4RGf\r\n/xVWLNJiuxVL1RpBbf4sZgb2I/iA6HpWujm3QxLtS66pINgPdRcZr2H2qMj6\r\nt6nKpK9+sG5V62OoUpxX09BcmwtjnLSlJejr+ue3sdSLMHQZmhN0sQpxrhun\r\nxnYcTJZ9E82bn5U3PuYT/xGpfqMqB8p4jjmNzbzUx9P9DqOJYyGVVuQNn2PP\r\nO7EqZazbCossbm4tjsqjrCh+a45+EIxQUaSqU0Q/3NRhXtuXMUI6cZd5PSxj\r\nTOu5ldEKbyaj0m+hqJ93DtKU5LP8OwsARP8=\r\n=0rOM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204211736.0_1650616045113_0.021445455450689765"},"_hasShrinkwrap":false},"1.2204221712.0":{"name":"@bentoproject/soundcloud","version":"1.2204221712.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2204221712.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-c90NHQbODAxdjmUXIc+38a4J+CXn5A15byPO6xeFG7Lgwk3/S3phvY61BHIsehRKdA50xz+AVRG1RLxMQqvxIA==","shasum":"fccf979374a6f600f42c2babcddd33105f1e22d6","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204221712.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6ssB+cQ3GztoJYIRlKL18LhffMDeKX1bcfX5rV8EenQIgCj4SKXgVepfWRUM5coRRjvBtP3+nHZIC5jWP9hlvy38="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiY7heACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrW+Q/9E1GpeAmvpXC3JH4YOnokvzsovw0vDuyzKPQGCZyF+0NzpMW1\r\nyjruTPcm2DlyBIOQGpKV12o0BUe1K2EnTZXPisaQQvRDKUmvHUwodFiQP84u\r\nmolnMPKEZkGdwgHWze4CjUAn2ycQ0YDVYY02OVpdZnMdE/pyx09rwuHvmpQk\r\n4AJCg5rQtrD3VA9i8jZyHkihJ6w2xICONvB7EHUis26JZlrokrpKCuQoipAV\r\nlpB6ru+pQ8ND1SpFnxYfQmJ5BVljlP7Zo+DElW8dxj6Yo07tAYEzHcjoDumu\r\nkJ1b5Im57tvOuSo7fT4FmjNUhZek2M5c8qa6n2OVuj2Il3GpTsqsrwGPR9iS\r\nEvak6lEG+K9TicN6+5raYFMa+B/Bym/N/h6qivy8ggkCad3EvfO/OrTjX2fA\r\nv3MuM0yj7ZxPRbJBrbR4lwy8s6lMdA3Hy+urDyc/eShQnz4FlcJL05R6j4AM\r\nO9Nob98nH/QKvGZRDkUYNwiUZTZvkQnQ7J3C/jxmchTLD3QAYGYn8B6ovAJS\r\nbGkyiPzMK4DIbyVWRY3nC7/ZJhdwevM7sn5VPPbMCsxNQCT+gtHq3M7SuerD\r\nqRbyqIMvEtfmy+Hj0PAr6Q+fXXR3kte3abx+Wzq47p6e/he1Qu7O7GK9TxI2\r\nyuu+WdWgCPdpe+PSyZgbMbTA3uKIFqeCN70=\r\n=guPU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204221712.0_1650702430275_0.14204763379779162"},"_hasShrinkwrap":false},"1.2204252045.0":{"name":"@bentoproject/soundcloud","version":"1.2204252045.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204252045.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"9dcb73514b52c635b732b72b56561ac680ea344e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204252045.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-BTF/caFr6VnaJ0ZGFNY941QW8ccOMl/pRl9iY0kj+FLBv5tSm01RnWmkyPBmCjIXNKM91VG5hZest5m54cuLpg==","shasum":"1830e7f6e8b5f1eb72f28b84e3d5d675f2296816","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204252045.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3QGEAMOcsb78vKHX+zmj+qw6xRI476vGY4veIK97lrAiEAsPv71lQ5rmxObfW1778NohjwhObOluTqkqlCPYCxPl4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ64yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt4Q/+OjrlG8ds8Tz9ooX/2cewjF0A0eAJeA7LOP3u/mOikKEGcr3h\r\nUbizJrO53N46c2/UYKZJ9lSUW+4i/gXXNxczX/ivKlA1C+y9EibG69lCvAy6\r\nLBwpc3O9BILW+dxqdo5Y0oQw9XoGfSbuBP/9Ru709HkD7gPxd4q10mUhVyig\r\nwROu63WI3fyupydZSAAzbXZxgJ0dudxW84OnO21YxFBajB7p/uHSrBKAwCAn\r\nrOFUL+/qVqOXT8KDVyqWg+QnV7eGXem24E8QjGlNkUZVafZGJeun+wPY6B7R\r\nCjmyPHrR2/F61eD2ss3GhvLPJLi0+bh7LvmEqjO5TpmnRMCcfGdJY10qieEI\r\nkLebrb4cI2RQlKaAz+26pYTbSgZ0B3h7w5Tkr3DRNjPVXt7XJtrEslv62vBG\r\nM1NjVGLQfSH0NNRlRfkfyEG1dsWeud8jTn/HtXqcpNgGODYkR84sv3BVSwYI\r\nVppPbekFcgBLGdwaysyGnlDPIzvZKTqM0g0J1SB0HmoeRUK1dO7q9fmVoD+4\r\nEM5FDKh0m1+wjqb9aCsPSNd3UjlBlcWUR+V2cOvu3xwaq4a4N9hj+5Z0qIS4\r\nDwoqBqxc8FWzB1sALweSQgqUn7is/LVTEQvK/ljIaJValakBdtKEDrkIZnz3\r\nZc/y1benehf+DSVmFEFohLXD1AU4CAI2Vvo=\r\n=7QIR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204252045.0_1650961970191_0.5118304508999756"},"_hasShrinkwrap":false},"1.2204272205.0":{"name":"@bentoproject/soundcloud","version":"1.2204272205.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204272205.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"c2397d28837191a7d145806840ca6ca9a73823d4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204272205.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-4HgJrQHBOWYlKmUoMxqt8Ke7DZS78cZjA8Yx51EueKyrnG+fj8knMdaQSHEfRmVNfi3b9hH+ZTP4ok5DBzFQvA==","shasum":"a7346616824daab1767736647d3b4a022cb738e6","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204272205.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCleCNGCu+063h+oFvcU1sthJZ5VVeiqjF5swJZpkpvgAIhAM6Bo4uTJ3+WxQxnyxR0rIFoBtTGEe0qVEmAisRKIxZu"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJialE4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoB/Q/+N+rcyvLvY3yGe0wlKjiVIj3dK+0+2Pllr1cHDzX/FG1Y0KRx\r\nhChfjohXA/hvbCvyYDeSXiYu6YdIUeDGQm3omTTJmf+CudV7dAJKsln02wfJ\r\n47mskHkdRn/FPnXpAPMjTi6xMWvufUIsl27q3BYyxc9mh8lw7N78wUdUTxAT\r\noocZr1AVE353o5qirNVhd7KAU0IIeztPG0WpzXlOqtYkz24DQpFth8YMQWLr\r\n/RFcpW5Mz0YFVzDJw9abgEVdl2td+tU0JCU1wNIJ4LNwPL8gNi4y+a1EZqB5\r\ng1cn0K4JwLgcXJQ2xiBtJRQMjQHcS9BnOmTMvUS+nKa/Ac5uS4H4pTOdhvCH\r\nzeq6k2qaJ7ZLs9I9WqUu310CZ1bdyw2Otci6upPp8KgHNryJnS0z9CPxL30B\r\nGI3bwbm0ptGmNhSLrblcSDQNlIP8Ife8lDyjOlxEZX+D48vEGZr1rVGlgXwJ\r\nPOynZbrEM+SAWZ6Zc/yg5GM1H19ZgxNXjGEKeyDms4X5ow2rHizFhFHOhQ4M\r\n1CotkoARJ7huPHPhBqN5XMhn5p+jdBC0owGvQw2qvc+U6wVANbgCxByY+uUB\r\nFIJvTPfEvOeZgX5+h8+xXmbe9xO7NYF1q/SDOklGcqVC6YJnKPTvJb7qQRFE\r\nj9ncHfa01aEPwrAmG+PqUJdZkZRmxaTVrGE=\r\n=/UuK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204272205.0_1651134776206_0.6473068915019391"},"_hasShrinkwrap":false},"1.2204281949.0":{"name":"@bentoproject/soundcloud","version":"1.2204281949.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204281949.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"8bd4749759e81fea16cc216637d7a185eea3402e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2204281949.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-s+JECCSFkGAjVT69CjF/RXZFSV+2+xEQt1qHe9Y3fPq13YSr4vX5IMcf4rQvSRHbObn7tl2hydHhrSasM3Ddow==","shasum":"c33e23c9703179766634c8209a32c329b315de1c","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204281949.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYjk22ZKiC0/zf9xITkyWSk1chhHRuISuc+L8JyXgB+wIhAPlOmMq82oeIOForTIxEDqUuorLm/2Ohi6JJ3asWb8WD"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia6HSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF5A/+K2mfT1lIx74OIBFxrdXgpCKwVd3Y9QrK2Gigo095xMhkRV9j\r\nmwOikqmoiBx/k6hj1pRfX4mGaiqa2cPU2SfBMaakBDjbHAPrdHDDXVsRYGjr\r\nDAOi0ZjfXA4YgOkQNzgDMV1LolrrcUL9ES2btSWti2/Gg50Pls6Xco8bmIuE\r\nL16taCY6J76k6MGOTNWQWLU6rjPniRfx9JHQe3Ndr6h4Tce5eVehHnCI9Typ\r\nlTk8J4BfFkYrVlL8EOARipmvTBXZstwYA/slRANV+gsXNs7N1hkFUsMr1WY0\r\nvl6i81mTtrhNM9mXSnJdE90iuX3SgmJYWw2B3rdDrol6wIv4U0JD6VlMI0O4\r\nHCZGPVk3g0FzpMDnPxDKk0abwMWy5uYiBlUYqf45ARfKpmjX67nXQefk6Ddo\r\nm6K+v51nWwLPE/Le7y7YFx80/l/F1DMNRbPV3KapyXPWhaD5Jbj9dJEQ4JAs\r\nGwkWfjWPB19F5DYR4LHcYEr178rAyZ9jL7lPrtzFttdUdTKSIguUoGyoZOST\r\nfZCYUEDlGdSODobXm19aXXK60UeHToAesf2h8fHoX9rLoidCSsdpo3ma5uzi\r\nJrRTfsmAKQrhJa5KsK+0YmjELGQa3b2hOa6Cjm+wVlETml2eBfRmSEG2JYhc\r\n8sz1mPboT7vap6Cxhcvzo7vAbG2fZUAW+cE=\r\n=19Xl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204281949.0_1651220946369_0.8614395159067882"},"_hasShrinkwrap":false},"1.2204292129.0":{"name":"@bentoproject/soundcloud","version":"1.2204292129.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2204292129.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-n1Z5h5LpRWilJdpg8kY/wvC67dJm6VxG+imQVQcdiFljp4g62vaUI0gjdWhkFFVAElCpBhyuaA/fqLbwLNlSsg==","shasum":"33373e52c85f7a45788d989518b24d0d44790f7d","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2204292129.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8psrVUQ3mqVdXCILuyoXOKWbPEJnQyU9K7JZt/SQxTQIgC036uQdOmulWxMrMy5urHGfnihBLtaDiXI0uPbuVbEE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibPLKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiSQ/9G9sLMvVp6mxBJIU3Y7SA40hvueUbUf6JHJ9OMTrlKheWi1+O\r\nVdqcFFc+txSJIqjodt+z28rltjl8UNAf6ZfibWzAdPa8woZ3LygD4Wh3NoUf\r\nCYOdX2J3NrICVv5Xl9ALjdpXt5sIC8Jho7IAtMouyAv9NbRwyLuodQVyfoou\r\nIudyTkXehFNnH+Azb71cJkbnrl5Bf8baGI7MnZckDWMzQpHQx7UpthV6bADB\r\nzcJjlt+ioM6MbQuR86AQEFoToo2fNiuezXajS2p5VMZdtzeHv21g6zoFhxDi\r\nP3Puox0WawNb6QyxbkWVJ7R1JA2mJXC5tj7T1KnQQjQmk2zY3iNSr11idULH\r\n0waJKa9lSI+eTw80Ztx0JSL1q77WN5YlCVGDqIYh8B4zOxFAt3nG3KvdLz7W\r\niCUi7dCpOcHPwyPJxu+akX+h5Z7EXGl7mVJ1KXAoCWvnNs3rkdoHEFmNrxlA\r\n57JBZb7nL3oqwrgSoB9V1iGFddLtFP8JhIGIA5UJJBhAKuMj71DTFHqd5+VY\r\nS9eqaD2z8AjI6YwvVODL0xgXv4EehZyRiYexlHJro10nyf/O75/E3WCG+INd\r\nfImYnzWsgqKuSSqrdKNQHp0XHMSax1mwjoh2Bpz+/g3svCIGBbKPAtXmEtzs\r\nJ3UN7t7dvIBdkQNvfsenQBDdHTztH/PTpvQ=\r\n=nhAH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2204292129.0_1651307209872_0.5757403143952997"},"_hasShrinkwrap":false},"1.2205031420.0":{"name":"@bentoproject/soundcloud","version":"1.2205031420.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205031420.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"d3652194dae7f17865db127c7135ec194907b7fb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205031420.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-JkIo5xRHYtg7fz0qkvqT0ieM+Id4d+oHCIXSvDp7jkL9NMXWqzdxVBl1yvdw00OrlsQh7oqd0D6JkwZqKkflrw==","shasum":"4eef2a02225c27678c2fe6f54205f8ac524707a9","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205031420.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWQt08B2ytzgnomgTQCEjyzj+PQPrX3SRJq9Rzb4LfNAiEAvnBIN/hzzvMueWsGvWC2WjCCan30cX+SAiXcDxNP+SY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicjkIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorZw/6AlQ8LlQVYiwbbPPitIcuPQel8aDNhJ7seN+Nc9lWVP7YIUfd\r\n1Jer+7oBbSH97sSIfhmngcYVws5ryJ+sSlUThi839Yt6+F9qjUfQMZTzMdiY\r\nViJlv0oDTuo3lngNwoCFU+VAN2WblMIGm2LL/631xZyzK+kUDOlkCSHkR+9/\r\n/elGdc833tCoiK7tvVcBgskb3BFRlhlB1L1zGyVqhAXKoGjNlZo04F8bACGk\r\nrAz25tdK1q/8srB+0Gh6fpDvYGcEFBBIoB1nxiFbFm3Oc87MN+tjjf2MMY6z\r\nqXXqIsEYXxWfQDvw2RSDIX2tWRIkwygelBNWHwwMkPhgUkkhy4Poh5rs6Afl\r\nXWNtIcX85GoF7D76UWrBVqTWkbo/Wc/DA8bluH6NMgSEpAfOLuxsREEE+RcP\r\nQUhxVqufpD8+GDIQtgOCgDBR84BJl7lYUJ6LKwSKWqXIdWejYe0tG+CNLkp/\r\nW+q+6u2UMxnMiPnkPk8L7msy8u7o38b0DVpJg9Ig1gmLe1l2OgKoPMohhKOo\r\nlQFx4XwEvtHWt3x02xw1i+Un7/YL+9/QqSI/oQh9h8Ml51JRemgUZP+l0DR1\r\nlMlHGiCLd2pRLCTfuRbwv6NsDuJPFLR0nUy6VE0WTZtJlteUl45W1seJC/36\r\n55fq62SepbezxGiDLs0mBwBWkJKHc1U7n2c=\r\n=TjOU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205031420.0_1651652871885_0.1955760334794714"},"_hasShrinkwrap":false},"1.2205041533.0":{"name":"@bentoproject/soundcloud","version":"1.2205041533.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205041533.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"8c9c66c7b1ace99b28d77b82807f84e9e8cb305b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205041533.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-2PJfD0nks8CKuRkPRbPjlGeqytVRCkrOQ7CBKdQ1u1Hdd78xPKRCGQUtreKyooYdLg+RX6X0UHX/3I64X5DEQg==","shasum":"58bc69b45b1a0ddbc1c8405d05fc88af87d379b8","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205041533.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYr6HBwe+NvvYLA7ViHSu8T4kwWZHDzZ9m/QJO6kPgKAIhAPxvPLkVxeoQWrBmVkRCSMHpc/QfldnbAiz2ga3zLuYt"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4p2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxZQ//VTGOYZgqWyW+PnI3J8X8/B09Cje5qTFOdCdGuioc0xlkQi9m\r\nKjqQPxNs7z7JSxZdJlTAd5ShNycnodOoqJkh7tKKgQXn/AuwbMVbzbOpuylF\r\nc+5uE1eA54QpIZ/BtPe2Qn7KIef43xgIQVYJhAxSSJM10amY9iAB2GG1YVnP\r\nqL6ay/B5Q/7pvAVusYFKc0bKgjlfphvyqOkJ/93n86xDQbDUEcArR2nweiag\r\njABJwuXWiVVt39dI4kDydcenAXdkghCRMOmDkNVWAmMClNI6y7pNMgoeq7f+\r\nes3WYl3+Ouk8SY150CupkzQhkkWoldEq4BVAsSgE4eTOmWYwQ7R0I2hbMjt0\r\n57UuXtK995qlyfMt+r5MbdQ+J/bNNBt5uetmugOuiVAH7c4FSSOyKyUUPoWI\r\nfMRRB/qemaWDmj0PDyJuCFIx0vLPlwmZC/J49Co66n2b/LnabANm/5tOkCUJ\r\n+8YZnTERc8DreUnziTnk7LXzF59lnPYGEmhp8aMXvRR0W8VX3nd8zy3mwvW0\r\nwpdc2+iXAuY3rSXGANCKXD4IG5cIptmZiqambr/BWiRMidxAi2XUPS38IJkV\r\nyRnY+z9PVyuQNzI14jO2xGEGMNiqHRq8OKpHQXnx5jb2Z5FmrwQ0IyJ5LYmP\r\nXQ+nNAkBeuTAs5QPfn4kiMfus+aqPJElwkA=\r\n=w3/z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205041533.0_1651739254387_0.06034573807618271"},"_hasShrinkwrap":false},"1.2205051832.0":{"name":"@bentoproject/soundcloud","version":"1.2205051832.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2205051832.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-lMRrn8yOJa7O9k4ixpy8xfCxK0jkt2O4NpOsunXt03n/yiSyacdBZdpNlnGpFwRRqgZhnyTu3eXlnTrguLefiw==","shasum":"306b183f86220e67a7e0f2b8ff13fb9a3fe529d9","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205051832.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjbGPIKjTVbX3HwZlHqUhWZInZz4jCvAEV0EquUK0EuAIhAP0lI6vPGqhSfNLFhXJGVgrqE8988SXMDRM79slqkq5h"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidNwNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp07g/+JE97T3HwgkTkJArBoO94G9F9DCO53BJ2zDKBwUhbDktzmo3d\r\ntXqh3/7j9xfgMcq23+TZFJDY1pFjsnuEEwTUTPNIZ95k9TceEd9w1x0R4MUM\r\nmhvBlkULcn/rK8PxGAOqn7RiWwDZ83v1Gup4WoRk4pVznmWtyivaPYk6fA9l\r\nTDd5oE5FvNU9tkUb8nYcdmAphpEosr0YO3tl/zdtfSRXcX6jEQxGmix8KRiN\r\n4UU5EHNfwtWCmnBG5K0SvlS2SzTOLZPKgejnMcID9MvB8fcZL4ZMGqb3m5GT\r\nXBkiMJbrbsN2Gut+6YWJdMf74dUZu70+CMDqGNEqpr+A6LVg6y1msMaH2hCv\r\nJGyS43n/8AXjI5fM1xMjrcRcfX9bQ16pdoWkL4Z0jd66Vep8TU1KH9M5707c\r\nUDDjQtcr+RMZ6A8wSwluLQijQQxHhWBHUgbtXp40SNkWudBjCefmRitYb7pj\r\nw6EQ2ce76N4vV3iO49byyA6G3zMzlFL1b/Tuv19IP6eWIWdD5zg/n7jGtrGl\r\nehpzTDTtuSDZTFcZIQteX0NGv5vELPRj+uLphyYSMQTXpXugsMHoxVSMGIfE\r\ncOBq0xpsdl0i7Yp2TiBDMtbtQRibWEyNBfLmQ/8bJcQda3yylUlqK5+/7PLw\r\nIZqZlh64H/LPee0plUqE5BxXCz7IZA+/mYk=\r\n=iD/P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205051832.0_1651825677562_0.6611473972623803"},"_hasShrinkwrap":false},"1.2205090810.0":{"name":"@bentoproject/soundcloud","version":"1.2205090810.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205090810.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"3fe2ae4108e8ce4355c90640458d13cf81af160c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205090810.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-HjZhq+u02YJiqyisBkZkcvP3xdJ3fSNmEqlaPxHiR4R7caguPS9tzIk+/PmGrrcRGODfR5TSzIO3f7QcLtTowA==","shasum":"41beb22b28e1a5607532511cced766c2f3d55d8b","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205090810.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbXIDB3B1e9FVHaJaccUb5imbQCktUCp2s5IHNcnzprAiAMb49u8t8n89tGaRKkGB6ZqcoB9sO0iYMbPwEOOzd1Ug=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieiNuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFnBAAicxkeusy3RqczAH+L/XHIcptRC2LzUvac+cdJVlAZsF6H7tJ\r\nfZDpa89ROo5WdBHGGi8ZzuZzC0IlNE1mJckD19UyOPgXeMlHlqictdnhIef5\r\nUPI5oE2NxNGs6qn3+6MA4yMS2U67OGJ83qG8SMEz8wDBez70ln8H9KRH1okr\r\nD+IlonsGIYxPKYiDiYvMgOSO6kGTdW7ccqbu+inYBcs0pdPWYL1153T7cqGC\r\n53nwc/b8MCwfQpha7YlRbRcfAqnOrVHguF1GUjA1RC14CZ6bB8rNv5i2dl6V\r\nCTh8F+Zgyjacnb3RsLWhbY46crK8x14wCfg2nL1zZXD0ZGIb2EYm8XrMj9eu\r\nuCaT0M62f5/kXNRksQNz8ZbYbZ03UW8cwVuLhVTQWb/lAyXZiOUOXzVp2U6J\r\ntvZEZTFP39n+EuKTZGNhZvxYf0Mtq69SgO+O1OBtcbcc03wG53bl3OYtO9El\r\nnUIx1nMJw0hrpTfuUSmj4MU7B95G67FcmBVhWpe7n7+jMqdZ2RQW/hXX/kC+\r\nKCs9oEzxgqabux2bhPBsBQNKnSm4+t8u/22JoA90qLmjthayaXrR9eKR/i/7\r\ny9aum4mBYCJeIcsw36qWB6Pa87LtZaAod2rt/0D5CHpaPK0oGVEr5zA2nnRv\r\n62gtZk63W4Hb5dwDdL0XQoLVjSziXdKnJIg=\r\n=4WI/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205090810.0_1652171630579_0.21890538573537666"},"_hasShrinkwrap":false},"1.2205101904.0":{"name":"@bentoproject/soundcloud","version":"1.2205101904.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205101904.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"43d879755f765aee2d0eab657533b493a025713f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205101904.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-wBrH/vb8hJ2DS5thmolAS2vXF5fn1PxtwHnuc7P7eUUculQWWXXPkqi8aK/VCKBKQqpAxgQFX/tSc0qdIxpUTw==","shasum":"01aaecac729197a9cdbcc0717dddba4e6fea2570","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205101904.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSXFupFSdTRl7F82HPCBaijg+vIXeHcAobj+AXuCDIAwIgX3X9B5a7lIAz++ZqTAA+4t9+y9nGCjQ/nyns5ipGCR0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie3TSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg4w/7B9EZIHaQgRlRrd15mxM3IZyfLN3LEuyZpN2bFVEHHIXd5jmI\r\n59gN12Wcu9bqrHuOmgEwRASp79zXQcWLPx8JZNbNYIQg8l6t30D6lmkLRL+j\r\nXixflcqIufOGfGES9hcSXVag/6Ldo5Uob8M5yV3wubK029hJYhKv8RwPKlGY\r\nKbZfQQF6RDXI4MBABJt21cY6Wc3aYduGzDnO4eG8Jhfz5W5Fa+bOQ674oobG\r\ngVNjO7elFM5jVQWQN4aa/mubsCmKwHhyXNr9ugh0x9YW47TBNekXnhvC5o0C\r\n+HyQPLF0vN7mfpg4k8OzJ6UlIsR6upE7rCAI1mhRzY+npQodiCpMP5qS/qwG\r\ngfWes/Y8MltznxdSUtcN+XYBOv/M1fUzoF5rAnBkfCzxc8a4o2cZHujcziyi\r\nHi0hKkWGdlHJqxnVnNDmnm6VUrazKpDgoTqz3IIEAgDVK0cBaP2c8Zd0SE83\r\n2e/0fMCAUkc3wAL8KolVnH3ZNevZ4kdESwNREALQvYYCro+c3nhmpnSZQ3/3\r\nFebz1Y1lSBO3YDoxlW1SjTP62ZpYnWfHxwV0sMsVLwPmk6EGojIr6UVHjE95\r\ng6hMDunmUuE2GtAY4vny4SCw72XV082s47IBKTNfcXTasUt6g2HqaMRrxITE\r\nEOkPUFo9myLZQ5BNnYMvKLEmNmga1dLaspw=\r\n=/liW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205101904.0_1652258002744_0.754603465698795"},"_hasShrinkwrap":false},"1.2205120110.0":{"name":"@bentoproject/soundcloud","version":"1.2205120110.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"46f34860b9f501caf0eda81977d1ae3aef4a947c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205120110.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-dDCA52Vk14CCAqNBLtxFEcmdyK6sMmP6iej262gJBb3N1B04s6QKqlWJSO3g/RBtxVyLjy9Z5xIiPjjCTIcYaA==","shasum":"17ab9d9f2d744a6ad394563197ac2c1ad5cd7e73","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205120110.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL9VjdloIlumCorZsKZVQXDUeFq5lr/4WvzKANky9ALwIgR9HsMYTukfW519IaoMEMCCr+3R6BhVRPJsptBsqB8b4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifMYnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogYA/8DcH5KjzcBDgWwjbZogIHolXoAS/1V/qGMVqv5ILrR4+EYlLw\r\nzTqs3zTdrO2owBABf+9KGdB7Z5x+iUCQs99RPfY67T7LJJAw+R4x//kZWCiF\r\ndxBhex9DVmMS/3Pp1cYFghp8NXXybhzYLzKqutfU+SSBf8+TdYyuCNFAPeJq\r\nPRp9yvxHKB3gw7mmSIewjUyOYZnbSwLV6+w9XQm6J8YfdB1DrJwOZ0cyGXpj\r\nmjA2ll1JXo16XzlMksGg2hKY+xXWIzL1HaqDYTRS8rB3nck0Ov+kuBAqCHe/\r\nSGpKElYbJM7WF6g7UVT6V/PE1cTNv74sk6+P4DT3sKWtypPG7nm+HFa1zMGB\r\nZvq5d8FhNdMoSmWdFwIzbBFCNrN250At70y+0IJO8TTC3dIryxOVG2jraN1r\r\nNOCRCOwm2zmVbUm9PJvlztxA5Mn291O6+3zEbXSIky4lXVoGMnu7i3vj71qw\r\nJ+H9tHHrXIs5mFdIsFgFRmmNRpoOKOnAqkbm3WD5VSBXiTWy7ADx4PWm+1yS\r\nrsoG2GGEeZqqgTzd/qbVo1H37prplKeT8xbphNFSIwb+/mOSSBdpXA+3zp/q\r\nvFkbyxRymathHfO8gEhu8kAe2xcZMSLdOILe3yuUeR5uqkJW7NR6hrM4rI6c\r\nQJANSGR30J6NyVz9w7SkPxDtj5Cy1PbL9oc=\r\n=3uSZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205120110.0_1652344359583_0.7402885814695874"},"_hasShrinkwrap":false},"1.2205161914.0":{"name":"@bentoproject/soundcloud","version":"1.2205161914.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205161914.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"2fb4e151488ba4d856b33f836151d66b45ca457e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205161914.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-e7+/xADiayC41touJlaJ0j+6IXXUdB5eKztcx6On3W3VGY4D0AsLU1L27n/miTL4epF79v+ATtEu3bl3OzfZvw==","shasum":"2a76905b4248a7b50f8bbaefe0a08c812b35f403","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205161914.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUx7Gh1RVYcawS4OLfqaYuTDxiGabHvNTuNHCH1BojjgIgLak88+DVWPbMuTBwTJzHPPnyG/D0U/I7cwycZ+H5uRg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1yMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr64g/8CmjB1ecLl/eq5+EGit0djw/op6L4vGDI7xIgOgdoWOZB6zIM\r\n5fPtaXf05ioJUa/jwnELszvm0dZOZnaUavvK7Z+m8SyN3DfhJqRtfUnzIqq1\r\npF4wXCizB+SlV/Sjgx2TDu3kCk4eitWUSAPhN4JmvtGhvi4rHxQHDUWB+buL\r\nH30v0ijByUAu+2CsM2eBaTc/4juz/9lHcnNVHQGo6JB6iB7PNdcL/c0d54NM\r\nMyQbgNhqtOyoGLt2D+AtO4nzwww2hygvkGgIdE2xVWZe735i5tBv2V6mwjsx\r\nKEFMttSui71jbHj3PEk5dPj2/MZgoAF9wC26AnmU7lrczXplV+fPf54PE3ZJ\r\nZwxjz5iyyLFDveaDWmhVuzoAUcZf7vJ+cZMgPgl3LoqSd9hdPmuej/EWoI19\r\nlrJn4ZEZvscdKb304Ua+zOckv6CeR8ykZhqIpX3QGn+LYRjZcf1Ib4GLQYBT\r\nlfphKOO/Ur5P8Jmsz2IbZzK06s/j2azNCbMhfzVPkf+4fqEacFqhh8ByMxM2\r\nItg1CIlW17d2K5h6pUQmNRVliPM97GDXb9OMfxwPnoFnLbCGtPY+epyPaqm+\r\nOujOAcUM5tDiGIwe8Y3EYRBz9ORdKLnd3gbt3SzmXWTbVB2C4Hv9470jdIYK\r\np5doe5DjP2QkmZzBDArGx7mAugkBNxkjy3M=\r\n=MlyA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205161914.0_1652776076382_0.7437433582144768"},"_hasShrinkwrap":false},"1.2205181800.0":{"name":"@bentoproject/soundcloud","version":"1.2205181800.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205181800.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"fb3f61c46e2221f0f2e1dd836127cce386c7bbda","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205181800.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-htTBX8HBBasViOlzgQdKFZ3mkPjvelNq1KddSbWK/dfWV6x+0ir2L2TUSUoHZoQOG5CVcTtsaByu4mZmY3qIgQ==","shasum":"6894298991d4a90640042ed2a12e04e5430640a5","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205181800.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDZWwIcQg5GIAwEelVvpcumcmHogyXw5SRXkZx47JuskAiEAy7HFuHqo02I4CUvxyfu3yJBa8H9WiuT96BaRwZbF9RE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihf+bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqueBAAkrvezTvEz40R8Rkdo6Ad5MH7YfQi8HyWhj+sO2rdZOdCkINw\r\nGSCALvrV/WBMcz/Lbg2SWJgV3qXDE9xq4NH05PMcxeonC6jB8wBhP9X1bKnO\r\nh4Rfrhqd7nwTKtrdJET4eS5M0u04UBc3a9f7HqqbbEPFDlg+BRE4zQkDeTsi\r\nGFIjxnvEPkzn5GMlV5sMvQD3u2nzQdudzPAK3aTjG5wdon2NMAxnXHJLN51Y\r\nvmiu5GQOJJFxyraRGOVPqXlGCsnBJkg5VBfBBNGZtuzys1CBVWlxpbT1paQg\r\nhPztLM5P1jTA4e2ioWGMgivuPT5LSskqnKT5JO5tOWB8uqJ1CP+EYbh58dTV\r\nBwsaOXz3FlBIbke0CWQxjpiJndXLFEBihDHj/I7RudJ/OxncI5m97HpRRttf\r\neM2Y09MxNON2fghG+aD6Uh2yYzFMxunl1AfAg8283vakanHejH5173AqjMuR\r\nB4vbkzc1wGU0nlxxxDUegSOdsUSqUWUqgoUnwsiFWc1sXShdGmfOi3RrZYUj\r\ndu+DiGfJl2vE9Kubwfqvz+FkIP/JDX+nTKwvOq1xaRV1pysRpE4tjFiI7FCa\r\nlbInuV6QY5Fe4lJVdC31m5Rb7MU9aJAjZkM4wNHegHXDkqhQtdHRK9BfAAA5\r\n5ZVQBtkZjunvoaDi1Mm2i4WFgbPlIqC359U=\r\n=RpXl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205181800.0_1652948890690_0.9770881870313237"},"_hasShrinkwrap":false},"1.2205191749.0":{"name":"@bentoproject/soundcloud","version":"1.2205191749.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205191749.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"83c369066eb9c7dfccb12aea936f29a84bad30fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205191749.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-IxuD/JPokddmPwEfE+Zfeu1O9puJzeuWz86+b1PDT4VNavsFoji2aXzhQD9b64uRMOO/rn+vg+IsOXEQ6gOuqg==","shasum":"2a0481937760583c50017611661f2d89f88618bb","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205191749.0.tgz","fileCount":29,"unpackedSize":547476,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrsuXI7GmgCvgFY5LD0yPysnT2RcaI3gUgKMgP9XinygIgRkKT4ESB6phdB/cE/jWEOZsLaax0U8yrbOmyzYeUiGc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih1EpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7vg/9EPiUMCy7egVIuYeX1Caw0rhqpUSD56tLtLVa9mDlDJ8sEgEd\r\niKF1GGmmuu4yvPQkjp2xXVI4I2F4MZ9eP0w4m68qKp1ErXiJ9BzGAbG3dUKW\r\nt4Vf1fToKfi3S4d1a2aopaPoVkn4KIvBTpSB65nOe5JF8MdtZxDosrVek27H\r\n7c1oXgknSJ46MSYGT+TiCUWA5N1JnA3cT74EtR6dNq3eUfbQKtGCvQrvYcP8\r\nfGg34+51ywYpt8myuprltgFMJNaiK0Ca1i+XVm57PgKKWHzHjHXhf3ZTO8PQ\r\ngtD4AjDNjGDkTFKsgLMFZuo4o60juFBwi8Bzuzxy4O1rdGf/yLjGg5i6KhMN\r\nOs1tSa1UqGNEbmReXvp4Dqn9l+6nTKjugbZzqvwEndNsbQsjcRW0cNkxxtuk\r\nwa9pbKZVkgxOJtNjpn40z9EOPkudAq48h3O52U9nRLPc6qKd22mIuYdnMxpO\r\n1RpSCt1J/kb7dwZKiN+posOG7TtORPLwAnuRCykq+DTjffWMceFRCayvesnf\r\nJdvSibJAIdT51FXJPrxec6aWeP7PkmADhJ8C4QORtXfiwqJbQDrC7iqziiQx\r\noKC/p7fx5M1plcHFbKrbgiST3S3/v+41OvRdLRxzrp6U5CkqmlI0+opFtPqS\r\nqsbn9X8wSt19xk7GVHWRmMHbuGMFZ/Rbu88=\r\n=k6h3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205191749.0_1653035305565_0.4024543156282945"},"_hasShrinkwrap":false},"1.2205232225.0":{"name":"@bentoproject/soundcloud","version":"1.2205232225.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205232225.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205232225.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Kbx4rG/9AQFC0rSSLh4GGBVL63dbzXpjAx1xuh9fOZUbO0TFzg2VEiBjPw+N6uuPbeuaASrioc00wrNpTOsceA==","shasum":"0cee63e8d3d1e814ce62e1fba22719643b66fa68","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205232225.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCar8+3AOE3oE9GOYoq75/aw8G7qFRMS3umFBB/Coy+IAIgKw13N1Yn6G9go2uztUHQWncnAmlkhxMG/E+0H1UsJJ4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJcNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ3hAAgxsZLjvM6UVd4gHTH4sks0B1VUe9U7mVQP2kawmz3xbfWAbt\r\nO8LRIKyprlH5AClm4eSvRxH4gBuCMduSL7quVDwbm1N06HQlg95KAnMMsKMd\r\n4XGg1hhGdWgCGKnyGhVPWWDog9eslLIPnoK7XpQ72JUlLjWiaX8tCuxraxZX\r\nemP9IBdhUk665jlBZurluYvzTb3+9dDW+mAY0uyMAyPmcv5lNpTd4XqXiLvW\r\njbBV+PhUFOtXjgPD1SiUkIWWpJzSwxb3OuKaa4zfTmv5/71l9y3eNB4elTZO\r\nvak47ad1d3km8UFasuYRd7DT4nIKlJA1TdEhw2ZGkcqyCDMK4NMThJOhQqwB\r\ngQLmonIUezhjtySFhxAjKDRW43NRRO1znMnj/xUTD3+57BtFTbB0lD66K9VT\r\ntI7eOwehWn0bivKb1oaAl+1gVPFWMfTtGX166MO2nTKYIylhfvqCRZDhEcF4\r\nL5OKC6Ow3YuL6rUySglh2zbS9MBecMCJg5tB57qZLhs7c8T4EICG3I3uVtze\r\nvcoVMdTIUrbkF8VauPtvAW3bE/7mlp+PmJFsK1ysUTkwuHNkFvHaQUtpf/B+\r\n4WTHIHtKuMJV5T2PxR8bb9O0Sf8sE3sYqgICL39u2oXkgVqQF46PvkrJWuUl\r\nYwArSZwx68mlrPqR/+YzoJRmHiAANbw7wj4=\r\n=2RJm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205232225.0_1653380877119_0.8425476777800094"},"_hasShrinkwrap":false},"1.2205120110.1":{"name":"@bentoproject/soundcloud","version":"1.2205120110.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2205120110.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-n+ZNEL91zkc/PiU9S8ZmPajR8BH4CrYr99ivX5eoS450f5FpuyPkyif/BeHFN56+hiPfJBB6IqlXlQfDxbhWeg==","shasum":"0c688bf3fbeb69ffc449306eede5d1bad2461a00","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205120110.1.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ/xR8BaP9kt7k0lwJcpyf420mEgdbCglXUnABW0puJgIgRVTAEW4p6hrr3fee+Oyd3kBInft6cEOenoyJaJZNt0E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijS6IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTMg//UnhBjwTcV/6jtltFj87kU1311HblgJOXVKnOjyFICi3mbhA+\r\nou32SPMJMTRcq8Pyl236Ezx0w1c1Dl6RZ6i5nYNcdxn/Yz2ThujoADeIkMxC\r\nnnXKjsWlfJ7u6VOUPc/m0ot/RAeq6w6joQ2onRb2syHGR7r4S6plZVfEr145\r\nDj2tXkk0DovVeFhpPrFJNgWHf2H8IYOg3CwbOcEPjGWZ3IMcpTxjFbBQrA5R\r\nwf3JA15M6S9ZebSu/IXcHzehjY0ftyfs5ld5cum5O/JA+prBczn/wiw+7bbx\r\nL6AIupQJ6u0V/7NJF7ATgjkdYlo4lQSf2UbLzOaqYEDZv+DdOnX6UkInazUA\r\njHaL5KAO/ld83TpyKxkbs2HoX6wn2P6dqFd1qPALrcB/Y1KdC5zan0RBPudW\r\n+de5o6kjPFew1U1oHU5g4xH2MY7+lvZEzFQMtvHruZUtmG7hE/l5fb9WsUnU\r\nH9bsNqDtRKj8oZpAjKKdOOBgxGecl1hc1+VQatqy7lrEzQGOPRXqJQaGFgFT\r\nRaQIqcR/iR0Hh4Ongrkz8BiTJSLsyGFfvSqWwaV6WYsU1dvC0r+LKPBVL3Yz\r\n4EmFMB73cKFSLftyXtvwwLxLYHuYMl9VIx6OE7hXNXki2AwpPvMdS+nAHurL\r\n/NyX6yLRMXQzs8VtdTe2g/v2bQAbS4yy2vc=\r\n=nv+j\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205120110.1_1653419656214_0.8961105319684841"},"_hasShrinkwrap":false},"1.2205251942.0":{"name":"@bentoproject/soundcloud","version":"1.2205251942.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205251942.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"e2f9546e2689785f0d9b4ba72e61759323c45bef","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2205251942.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-TSC4Jhw+FDFMTqv1tlp/DSCzIwOt0sgDSv+PwO9uL/OWCWcldQmZeB8u3GPSg3Y6h6bEzgnrnaOX7WcoYZWeQg==","shasum":"eaca8bed056822746c6f80a0ab2e989bf601f707","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205251942.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5pzhFLeANU9aAy/40IhKt1YT79mkBKP/kG01oBWcFFAiB0tKDfPrKitnIV8uAKDoki1QS49QKnidOexGLwwLSFAw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijzokACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/oQ//VddE3aqIqT13qFYrtM0xXKG0iCc9NJmOFW6tvTokjxGriMcN\r\nR3oXztie3lsd8jVn2YlD1psKWSHQaQfJTzKv8rm0hXLDvKz9r30bcHjidTTm\r\nMitqqhocVNqkNOnO4MAD8ypj6CFdhSxQqOOTe6AMSkOpz3QvQ38kLrW1VxIP\r\nBD4PV4kq0IQQsBLQFwNnsT6tMzxQl0XM7PAibOSgUpHOywjmD7JS59NLgjpM\r\nfswQGdfT0im0gePHA5lJbEAge0a7Te5pmY89bB84MZNz6oJhGZBV6V4DJYLG\r\nPq4yfkOhCs/lM7pr2wls6l5EoY+00gjm5hmGxK232LdBhLkabxHNbB3F/ozo\r\nVbE2IqmeW3APRzDSxRnWFm0o4E68SMzY6OyehQA58DL7UDeFo3J+M0levQkH\r\nsRjZRfEwhwKaOJ+fZa4QO9SEYKDLtO5JT6+g0Q+fmD3AbbxbIQS8WEieo7Zc\r\nujLMh2qWriCTCH/hpYa79xU4Nfkc85GH8pHURn5vlci68FHBTScbkOHSn/v7\r\na00wr2zCRXwYlt8eoPgzYJmGMBIreYlDzIBT2JyhFCjM8q9QKHSj6PmNXgGI\r\nxI6EXiZPke3f1GRRvjHyFDQKrNaHd6v4WMwziKpkChgReMkw4Xo2lJYsHs/f\r\nnGlSmIzieKAMxxDbsKvigQH8z3utKS8c6s0=\r\n=ojr7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205251942.0_1653553700731_0.644116743206661"},"_hasShrinkwrap":false},"1.2205270638.0":{"name":"@bentoproject/soundcloud","version":"1.2205270638.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2205270638.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-CBmQ1Gbuf5H7nwlk3vKMAYHqeTBHEcUhgmLUJM2oo/aUNiWH++0ywpOdMbyjeIjbEhERL8asu9IVZsftC5iuPg==","shasum":"96112b16b914662cddfe38a7a4d42fe5cd114112","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205270638.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS3IvXK2SdU38H2d8B9cbfCXM3ug4bGrSDeKZ+eAtytQIgdmOlBBvzjfzveAt2S2eG/STZkRGo5j5YwCbcs8cE8lw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikIu2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpa/RAAhDk8u62PjgPPxMQwnGsp1nNfWTKJehAnV6P4oMBPImHNuuuO\r\n/0XACaGRXw5SAG47Gdf7U+B482zZpX8zgEXJnV7wbOTr+FD7x1KtLpShuYOs\r\nS1FmVurMLsetloGodvb6in01Ax0x5rNDiDig/wYo3mNDKYjs2Jla96uKMdqn\r\n8Jl54qw1MygcT4ALewXs/w3Yel5+MC/rBngAsmVj+oe/2e/V1BpRXshTFEwT\r\nUSbPdp9iGytLjD+YqwKAt1JQ/Ew/DNWUjb6tbImAZgZ3Q9OXeewCAoDu0bp4\r\nE4/u5ePcaX8EFvR4vIQ1nzfnxI7KouF1P0PgnMnPgsGcQlrB/xjVRqpkZlFw\r\njDEWdKHLpViluRrlPn58yfwBNimiEdDZ6BbTZ1jqCS4wdHHNb8raHpUwRwcG\r\noe3kBAJSvG9ZKRnY46vXbeVICz3dYXVwLXjhKxEitkZd3DajRrtRTBg4Rm0X\r\n+kbk+Ddxi/Jw2sqXVLafrKIXy0BvTlKWiNBcnZR6YKN26en5KDNH+jOlm1u9\r\n/0xgkYfUwuRaPm6aaQoAzwhYw3DKhoWkXnt7Hh7qlqnoTseaej5xVUeLl77G\r\nEgG9aeFu6iWqwX6IduG0MTUxVF9iQc1tkhtTLEt35Kxplidfb0YxYXh0PEoD\r\nQiiV73b7UIs6sRydsRFqHljaBFW1AJJo924=\r\n=zTEa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205270638.0_1653640118487_0.8606522739390794"},"_hasShrinkwrap":false},"1.2206071918.0":{"name":"@bentoproject/soundcloud","version":"1.2206071918.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"f200c815cb7bd0e1495bd9c338425aed1887a459","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2206071918.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-m2aYZXIL7BITYz401m2/xSaMWL7uMOEwaZklBuS1bslV/a29YVs6oSZKAxU1F57dViJqgPsloZEZ3EvWwq4rNA==","shasum":"dc578fa03f72c95b3cf1508dcd79db04d4604f07","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2206071918.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVcMB6UFr5o8e8uhjrwLISp0v7yuZxokGffEDLaehwPAiAEor29qD00/LeDyteqOXnu7aPcwGwbKLUSxVJrv3mckw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin9EuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2bhAAlgB0p1+A07jPIPfuMZyO0IwDhH2WtGL+flQ0OQd9NzztrBzz\r\n64m4Wdp7YhuJqMCX81IDaeRCkTkS4jEIwZEqUzCsvGJK/YzeSKROnfJJxqTc\r\nudjvLW68orKwhg7aIncxkrC+kYXphk63EtYepXtM6ov+MAANHuSyCH75c0lr\r\nxu2KjFyuLf2r/s5cuVV5d60SamQ+/f0PtBCdJEI8JlY+dPRbgFVs6x0FhQpx\r\nd++f4xbtny0n7R8SlsI72eqIqmZnYQcMfux27g10bqPVwCECAGr1RyU4xrkT\r\nN3GRr7QE40W/cnblRuhczqyBJGIN1gyYqq4FcFxp3raLtIeOWBlHHpeAHog+\r\nXLyI1W4AvvWqT7L9FQn45EYMoUSZDMpitRVXV8+vF3x8Zdt+uB0jn6y3DaOX\r\nhJbpAzn9s4bFSJLen67cNNg5mEXvBzrX9NF2vKaBLUCnJfH+H6+4GAzSRtss\r\nl9yvd1QTl3hydTGL8nfLluyuecpHEIeVm8Sw/qcn5ZZZ/ohMSVvlbfXLsQP/\r\ntS6DU9wX3kn1jRlLtoJDtZeIFhIQobElYWSw6CG36OLLc/oleJNix6A/PWfs\r\n19dKMAuERszxf9by+UBnN/5X2+5RgqLsT+rz06X/IGb4TQjQz5U7RtJ0M4qE\r\nzdYYz+07fI8t1gVM/jo9XcS9Y3Uo0qvGhns=\r\n=fWnY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2206071918.0_1654640942211_0.13785292112139858"},"_hasShrinkwrap":false},"1.2206072228.0":{"name":"@bentoproject/soundcloud","version":"1.2206072228.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206072228.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"9cfa89fc95b4eedfeb00b4eec539909f0b0c0f6e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2206072228.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-A6DgrnoiqBm1y7DtruBpRMx+Z+Pu+l4CFVyZqSvKEXywBn26g5+e2oK9g4sIMZbiVDonGtoQVd+i+qjCxuLDAA==","shasum":"3a378966141884b9d1b7ae6bedf179c2f49ba79a","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2206072228.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7hpy9r+MLLolOE7yUyCdXAYAqkC0FP7KPH6Xhbtch+AiALzCSE3Z08C5Pkoac8YJxaooAsQvII2cCso92JjRSb7g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioF2zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3EQ//dL8zaQ4Cz9xNTUSPYWy0P0AZKNouHzrfLaUbUNp2ot1Ur56q\r\nNio07/zcGh0uzMDavjpO6GV5BAJwHht+Fn9vw/gBAcZgqMhfrXID0a3aDe02\r\nW1q0VUxPAeFWKejsZ723EOPi+FPMaVhCCm+rjloUegE483mg1cQDpctIM70k\r\nMQQ9snrNBB17xPHxmNV1FbF+w4b54CtrfmrfS2OpvAoo1Z5YDl4b7I4+YsA3\r\nPP9e9cz8Ags1cmsFUUxCVihuGkS61n0NnCO2CItak0XVWZPSqYPihSPJse+i\r\nSqceKXqpfywh8TAv0CYgXE+m0w3P+QzgwYHuMd/dNtmw2FrbP0ugUtuwrzS0\r\nQpZmsQ8zE4YXZ28eei/m4y0UKsMbHphyNYVeXOU0coG6eBnhHRoB1nNhuEj9\r\nlmGx7XRt6sFivOV5EkdQUnC76OgiyoLJ4BGWHoTOxxDfvdKZxRvM2Gw+4uRq\r\nDZ+I5BbVqvAFgkI42ZkqIHSrV5rcZ9eEKKuzcHj8/aLitG5So7AJzX3faphD\r\nwL6FkfDK2LoTqbWmR7Nslu0Fe0ErRv6EOnu7GXMG4sF3mim5o0EyyTL71FD6\r\neWttD7jjwNEwEA0camDL/dpoIk4w3wI9HonbRuENuNM8YZ104JTXOfWD/Y9v\r\nUaWwwAq6qNB0X4/KEVv2fgkUhbGl5jsdBGo=\r\n=iJzM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2206072228.0_1654676915753_0.5440709256528744"},"_hasShrinkwrap":false},"1.2206082301.0":{"name":"@bentoproject/soundcloud","version":"1.2206082301.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206082301.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"32e83d3790f33da4840247d996ed3f6b256a796d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2206082301.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-IljzqwLOcAfVVve7YiMs+4k8zGSapG61aWj9U99IEF02d8EJZrdNKOLNQ3tBwcnIMD+Ptasea4xsAePLUquNvQ==","shasum":"ccb2a565a0e67eba9e3af9cd266a928681916214","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2206082301.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkvVY9+O3J1udaG3wMWhl+bFPBfcCxkTDvAk6sVLpSGwIhANCnsMFuDJqcgYwwZt8YjNqbGaX8Z1J+DnANJPEz/9On"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiobAsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqguw//YyKJ/c2VfqfPhD866elNreaFmLT5F/xxqPTv62L0GAHHNsvv\r\nY/BKuvbflqfcSWTMWixiWjujrJEJAtNOgI/a+r4XUByteVb7/JaHqeYxHOBY\r\nuI4S6q47Ce04sU+70qLqA5ok53j//mO7JyvUyIG/yWVz+xh/fLBSZuG7WiXb\r\nfMrZUyyacqQZidnI8bbYUns5MP8vePQ4N0aBmeKjJnY/jKKidtYgO4buUBLt\r\nGllotN3MwOUu2tipFh1LIqtdDCsQjTtdvUssD15n61MIT46SiVY3AHt39Rsv\r\nTo4FNqWPIvs1nFzk5ijY0ajqACLWNWeIYoh7/cLrN/+eIJEPNZSytTpU2EF9\r\nq54HV+vmbpC7+a5PoiPREYUKmV5a33ZdbvU0Cf4gInn6fQP4XCw6aIJgjG+9\r\n8g//TeYikWswd7uuMWsZ3yJ/Y9g4KFA7mVh3Dmn/6wZuNH4zALhHUfRppgul\r\nBu1/azfEqEmxh2JIQDqIwXVZL5nxf9jlS1dxsDMDkzwy9gKgAV7Ir9jr3/fa\r\nLSXbSCgnBQCMlbOz2dYxJi2pOn9m+WrbsisvQpVDOGTWoLWbWwYDbE01nXQc\r\nyqrt4DKXfuUbtA/7H/3cPivWxBt1tYY8qh5oTjPHX2HHDiKPQt6xuPgTwxC9\r\nMcCoqEhlOeVFSYTK8WYBeLcrHVdy35xIv10=\r\n=E4rW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2206082301.0_1654763564297_0.2075265530273882"},"_hasShrinkwrap":false},"1.2205270638.4":{"name":"@bentoproject/soundcloud","version":"1.2205270638.4","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2205270638.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-JXcwZfOzFAuMNs/2Qv5dXEryfpVSnQ4ZmPTCS8FteYioX6hbF1kJOfSzEu+1mz7ebUI3V0BNSbaaqcwuDvSfsA==","shasum":"9f5ff99983261d4939e6e637370fed23c202c2a5","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2205270638.4.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/qFxBGC5/SPZ+Skhr3qmlHeuOsLrOCe1DQvF1KFtvYAiAl2Vq4qiC+Rsf0Itv4Kx18FjQjkFJ6mpuExq4VuIvDsA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio7lLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQqhAAikAJa4AuSKYeBsClYdr4Ki/vBD4bKHIf+asuPx/2ZhmPSRPV\r\nmcZBAbXla1P/q1/d1uh8bTKRFd6eO2qWT3zBFh/JQsoo3WOWnFZlabJ+HjI4\r\nLLWzoPlxLN04MhN3nLhgxsR9Hc4/lTuuzQg1xrFbRgKJv/pEf3dyO6zDHkyN\r\n+iAm4ho4WO/xMihZnQjPTG7VNmEeF2y5I4I3mGfHPbT87YOWu3kvTBq4kKmr\r\njTb96fWELQpbrOEtBIajLWEjfuWt2N9H4ucEgiEIgUemUYcmujCghULOIJGK\r\nAUiQnZAmZeOrkHHOxHRUGqawHHQNTfjTWci72lDx6bkYnmftzSjgbpxYcfxC\r\ncuB0v09oXxLwmCMVJit2PRZ1pjWnkMsuHeN3fWHSx+YfFnl+MEqT9CIXI/Ep\r\nRo7cZy1iE0WG/Zel7f0vy0AgJYT6VIkySjAjb/FPSEJYwYUIgYVGdDic8MNh\r\nE959BPbdHjVgxenIj/rMMVb5npAGqkujwDheoMZHkwPVpdSfJvtXQW0oVuH+\r\nrlzbbARuic3BMiaKLo7hj2gshf7RmdIDRWw3lwq2em7Y3vOjCqHsgYaZQVQH\r\n/0t7Ttqim4E/xPd4olo+4a8qdvhcrNfPP1pl8pVlqTL0uOG807Nd6a+ouFaW\r\nEA1WF9sw6VJ0uViuyZCZc45C5DG6Xsf6lG4=\r\n=xqSd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2205270638.4_1654896971464_0.8637078678522683"},"_hasShrinkwrap":false},"1.2206101637.0":{"name":"@bentoproject/soundcloud","version":"1.2206101637.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2206101637.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-qeVLABZMT2SIYVF0W5TujVGrvOeb5eEXlsijp2C47KBOfVLFAW+oWK43iKU373CJpm6gpWRfHUZW2KHDC3mkZQ==","shasum":"9d7fbadc302a1ad26b4bb6c69716cde6cb4c7466","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2206101637.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDXdhZjn8h80G7xcjtYUgjzZ4Ixx4nw+1zjSDnWszwhQAiAo61v1U8k0IMkTfhVaAsJkBnZVvn0VrQOuKl/RtnL+EQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipFICACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGgA/+KSObEj1lcHxEiJ4X7Igy77nrEmkQWvEanbi/CQMhZ+jRZfc8\r\njYF/iLHT9kHHh19AANwCdWrKsUzIiVKBNNcaaFaML24dEAuzOdvI21AhbP02\r\nSBVI1E92B5zLnrlMKsYkhgqh+SAAxc9D/B1Yb+uLEVj0zDlPDyNEn5NbdhWX\r\nUqnqgbpTyVR96DdA0+VskqkRAc8dIsQ4eUjSlOeBoHcv0ysDR5V0AsJhcsf3\r\nhCqte5JpCTDn3N7LXTtG9HAsw0j1tD3KL9eQPkQw9cHRsrayDgloSVjDD/yV\r\na32hFdjbo5C+Eo4A6Y92EZn/xyxzqq5TfMDprryatncqP6WxyOy65/JgPsBi\r\nOm8KZqq6bUe9GmkWCKFTdCriVoKChdaqYFxijzljdqjO8eskRh1DJSiGneUE\r\nIyhghhq+QRz0BPg0oyrmdzWXX0fsgnZbJDQXZFBwsi8c1CvqGsBX6JEegWXq\r\nSmxInaYzQV6kiVeYmoeAuqCJyGe5vNQlf4o5t9yxAff2M0zWwuysnkBZYWMm\r\n7PA3j7G1KOtfI+b+v7oKPQQPZAhORN5cFc4dJ3DXuoSbnK3COhpsBA/ZTbb4\r\nmwjwl+2/7aCqkboNOb4UUdcuXCIC83DX5lygl45l0mq22Ebup/vxHl9a1SEl\r\nj5spii4FaniHvPex0a/0OwpwbntayH9rmxs=\r\n=yh1r\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2206101637.0_1654936066134_0.047707072467006784"},"_hasShrinkwrap":false},"1.2206131450.0":{"name":"@bentoproject/soundcloud","version":"1.2206131450.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206131450.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"f8fbcf58e78ea43df73b529ed4a25e79ac758981","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2206131450.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-toyvMQeUDGReAuEoqMY2UL8FQ1Gg+Sor2MnHsrpXOn3dKMoJDfCgDbDwCSL6e9MjPZ583NClLb08d4cUzLUuug==","shasum":"94986d726111800a74bc5dff1da55fd2a775f077","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2206131450.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSyTLk26vCz7MYWHwbDqjAk/7Q+Qkj9KYCxSM5mwvf9QIhAKSzwfOGYn6eZfyIu/zFqM+6W3qsikCz8GxCGZbcqvDE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqEbqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSDw/9EKRHdu+jkoSr0AYUAQHwE6uTtKw78w+spaUI7IMzK2odL0xS\r\nwjy6dWc8Ez7G89jD4BzAdorUAtdrlEtNLLl5dFAqZhb7llVIOLscDjk+mrCP\r\nRCJUVj9SVgAU7i2ifCSVjmLbRmoJH3uoFTc4ywh4LhY90EMygl1eKi/Pw9sM\r\nM8SemW2i3Fa6VQEA7Wrf0WNTcC7q/2pGo+FLDsd/pAPnm3uVINiPRk8kVeuf\r\nqv9PyE4aoiRLzkEvIHgKR8iMphhf9CE52BwlLwI3nbhTrbDp6vryhC8f257W\r\nbOJ4ICAJYW8WoEhHBo/Zizzen4yZ4socwYtsca5ZeDTHvylZs/CBxHcZVNSa\r\nqMPQXiFqx6xuyRgwe94qGnB4TXIoXncDa2eRsbcXrpB/uXDBOQOReaM9UmZX\r\nDQP7SuApZhmzDRngv/+O4lQ3t7kKxBPt2dV2h0gS5Ghe8mEjAQUBQmM59HbM\r\nt3LfYCeJv3ySBpD2JFOha3pfDJ01MbT4mYQE4W5eWkpEe/YrcwTkY5dzTg/b\r\nO4/K6le+IvJgNIqyx8Qr3dpqZvbZVxV4o85vB6USJU0mM5MamjHSooSMyoSP\r\n02qo9YROM0VpY26hmr8VxQ3vB+kZZToR1CvHrqcDSXXTVI766xGYRBcNWUq3\r\ncoMlzF6l31rMPVNWBa3GgscqIqVTefbQ9Z8=\r\n=ZeG6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2206131450.0_1655195369865_0.5101229672785939"},"_hasShrinkwrap":false},"1.2206071918.1":{"name":"@bentoproject/soundcloud","version":"1.2206071918.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2206071918.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Uk9iqvYfcbhGt1dfkOD9y/AEuo1F8HYRMTT5iBSUx7ZwwhDpDZ3hSCJhRHrenb7EAwJ5ncT4hj1PjmTQyJMRig==","shasum":"751502e2723f442dd4369dda0090a2a7b376d8fb","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2206071918.1.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbQAXIMWFnW3MMSBBghRBy9E6C4xl3e6owuN/3ajb9oAIgRr+UAG2kcCJIqB3QcNpbE4DcUXlPhQyTgt9FkI8BEws="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqP12ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCeQ//dsVOBEDVcxjulInUi2H0Ag9IMauNCarPwoSlIv9SB+LtuPre\r\n2FT8q8VrmZMHtSmNXGhz3RMMdEnsYZrVuXORShqdWlhuH7blUZO7+xHcJbAK\r\nNOK1e8cTqUHuG6srkAD9zVzWRAiTI900hLaEBYS+Bc3feJmUAIONNGC8YHzi\r\n0qjP9txEmo6ie8HPqhGzTQyR2O88idRUqy/Hus55ssx1TEZeDhCfK7bhthqQ\r\nGmMkQSjDrxw4bb2kdP5+MzCcU0weW8XhYjsuVAxbWxWTYmN25d+X584AHirS\r\nPx6W9yEBQaOXTSufm9KxHRW695yH9U+oPtiwIv6OyU17YgK0LoNSkMkuEEdA\r\nm6fPwBXrA++1D036wbgi1AFTa62eEPea74fz4CDQ3lg7jPEPLtUEYq/XSmjR\r\nym83e44zQ403RF9aQloxelvhVQUlHSzSgXh4w0Aj8U1sTUq6wWKFmHj5wzXQ\r\nDfu2X3tRbdLO8vUArqpsUE4Sc6x2MsMICSqLPeJwRBu9TOhUzXoAf4Yd8YJs\r\nf/7KlFzoITTxvGhe7G6coZkjmStesrrDPyZt0OJnIloE/rkTEGvzTBFZ9lZL\r\nZNGvx6zOGVxB/HJUtmEIADI2oqs6/+J5shoLC1FFfK+eDMiaWcXTpIX/tOZI\r\n2cZsu48Tvj/lkrup4TyqeUDd6D3CnKP++sQ=\r\n=O4VM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2206071918.1_1655242102518_0.6624265724491967"},"_hasShrinkwrap":false},"1.2206162023.0":{"name":"@bentoproject/soundcloud","version":"1.2206162023.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206162023.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"15781b541aae254d04a1cc777016aa40759100cb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2206162023.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-3vWVwDH6utPZCuI1yac8NWKfFCuMVHa+oR/tYJ6s2RSJ013bJjd5Ij/LNpvJyA/XlrrmM05hf/Ax45OKc4wANA==","shasum":"16d5d7c4347918229d3f9463f8cd41c8263f965e","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2206162023.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCngvavgdh4QwiDiXICTZMs0juYv/AzjN2sAVev3MsiaAIgFW0J9kv0+bGMAEg0pXjVaANDAQT9KQwaGb1ZNmZtqJk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirDtBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5RhAAon1ajjIxY7+bQhblI5x2fcswMZlsk+HsOnCx+xjWZzlBIkto\r\nt1GqQc2QcV0Y+kML0/R1aTa1kb+gaA+v7Al2sUIp9nzrKNurK0lF8OZqlk6u\r\nL04kVhRnMdoOUMHKP5t6+sIGlXu77yVxtK3FdmTDYvBBgflsNDf+vQq/5DAT\r\nmsQXD7fkQFwynGzVWGJ2Fx2gdj5geDGR4VYchxBnvJnM0Yh1yA/Liv4ALPcW\r\nh0a87j7UuEgsPTyH3dZYV/IAk3vucgPOWX++JItG0Piel8MFoqqsRQwOqy1p\r\npnlq42qPUbltaCv2uFVCDqjOYYIbWAmOn6gn49w+4FfHrbdXSbaRp6BuyofD\r\n3Pk4mtsFVxg9Fh0KhqEpnjShznZuSiI+xSvEHhtklVpFaNOKM+v1F+AyLTQs\r\nFvVOm/IiOT5rDGYRKvpjSHpis4LMLWF8L/tSKMWHojwl9WFlxhGUu5b2xHlv\r\nuC/+GOi26PnVJqx4EL2pNhktopfXiVugkwh1T+u8z9uGaoxct3lK5+Coa9Zp\r\naxaN8EPBZQFlkadGvyK+AWVFb2QECGUdDPJ7ETWJe2aouY13rAqjHUODrE1G\r\nYPugrGF3+gzti9jhPCohmHaD9N5Cr3TpWlbLbz9IfSPc0k5TxEA/CfQ1aKhT\r\nNJ0pXTzKTJ9fYeu96HBS4oLLMYX7SDFzFD0=\r\n=k+OD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2206162023.0_1655454529711_0.1385332973189144"},"_hasShrinkwrap":false},"1.2206221455.0":{"name":"@bentoproject/soundcloud","version":"1.2206221455.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2206221455.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-J3ak8tpBVH7W4T1Xfpzg5ZdYS37ECg/hlHCocoy/iuM7zZS4AJCc4Q3YWBCqubuCPp722/izRVoCX9gtWCXjcA==","shasum":"a5814008479465015daacb0dbd2f1707c2d52db1","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2206221455.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVK39oTAaU49IR8F1hW8QXLi6sXB1f8rDEfxg8A28pgQIgdgRohAC538TrfqWfS2YDzadIPU6j9bsSbluy14+JUv4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitCQ6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEEQ/+PtMEIeUa06syop/DkYKXTXqBz/INVvlxKDLzvWIWIGdlPsB/\r\nSIuMlTtBiveIUXuHODoDHKEUImuzRUjq4IzLoAyG3HcmFZSO21Kw7mvoKl1U\r\nGzyBAtIQBz6TRW1QyWWxPSRF3GA1hZovTXCYP0YICOEucZMXhOXjI0ho9kCV\r\nMYA0Fbvm5dDl1yvAmQMakSSdZYpKaQFSeongP1/oamjXeUYxCQskbm9HxHTf\r\nc+PmPdTZdKDhc5UcQZSCAiGNfmXW1FFqS43u2dILp3e60yjP//KgctDuU+Nl\r\n5Lh+6/KOjZUX+bGYGXjwt9Biy3RMiZkF+8WaNyXUO4xhHvTeYof5mCIBOqAt\r\np2mS5owfc+YTSEW5/R4e+5HTp+oA5YDzuskTXI72ADOFdw20FHkBFuHlwbsr\r\nb/CX2AzYpGMLQEkkFQmxCLgIxcb3f6QCAhHTnGFV/agtOyk+D3e57BWaKvun\r\nZ0fQvwg8yOQYYjMGfLqM6JMI7zpQB2EoeJ/wXrVX8EZjMUZk96F3DcOdjZD1\r\n39xn8jzGyd0CfUm/mC2I1FeuPwSiN65iftZkpU1pF/dj1vZVk91iCk48RV8D\r\np+GQlogqDbDcrpaY5TcfvmG641x5qqcMj82jz9qg1PHx1R2i3GPLrDo+w/KK\r\nJ3SYnggWdpC3mphTHEtVxOwmKZibArsb5jI=\r\n=TR6x\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2206221455.0_1655972922324_0.21053304588617627"},"_hasShrinkwrap":false},"1.2206291614.0":{"name":"@bentoproject/soundcloud","version":"1.2206291614.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206291614.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"34fbeda57c3cc9d01ab3c39cf9618342ec840187","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2206291614.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-7dj1uLMnIlwkiB67XQV/6oJZXHsJrDw96XDOqZceZMfETYKK7QTPnHCfmI3oO706PxwczSZlCUHqe/4e8LUzAA==","shasum":"cdae9603ba331ffe3581e96379f9ca3f98261c8c","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2206291614.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkJxEUj8b79nkKfSLaozYfjHOvu+ph1GrUB+8m5Mi4GwIgK1o2b2q6PwMd0gfPfsmr0wy1fPny/8TY3nJ76lWcZeU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivcqyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2/xAAh6rljuJIBXTxYCMuRu2mVOI9b0Kr3VpLqF+50JX19LOdVBKf\r\nOU2oaFiTi7Vut17SH0fWOYwgyQCfKm7r0F2cjzmmgDtbWOu5I5nsOEFjpqst\r\nRiUJgRGEj4GfHzbMOt4OjW0P6Sylfeon9cjOwcoTTsUlb8c4I6Eca/B5O5jE\r\nR5cE2LqHcYYz3Y0Sp8EMM/4V76TZEzk5IVNv//RyCvGgVuRaQ+22dMC89Two\r\nqT6vctNnpHZrStP+wyzIQFxjfV3RjZJ4szuENkCilDRKx9vekXmfXYfhYuGC\r\nI6zq53hk+9Qxg6w1JpUY25X+oNtCgxFggwVkTwiNQ4roGXAsm+qcfYGxa08j\r\nPlTcZ63rlLOVKHn6IlHiJvTB7CIvTiGJ3toakv4kCxtnttEqJuKQ3Ry7OnvQ\r\n8q79biyvO/1pl5Y+DkDPRzcOO2BmtnSdQwDNuFHD9RdR9NLKYVQfop90nzLL\r\nO589X315CLJS2/SEp8UVX4UbzrMZ+aKO1Z6XUEl8MRI3zi7BDlcdncXmhmlm\r\n6OEGS+SnPgawocY+0aUgg4mbS8aL+DiJVKMCq3hYz7OwsKyQBQvkP4iB8crM\r\neAT/7dWGlze471p5hoj4rrFRUF7YPmUo4IzsW/Qy8PWLvbJDybUflXI0PMat\r\nWUoFWfsHTXl0DX9/JUIJS1YpPFJwOqBffAM=\r\n=h8dk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2206291614.0_1656605362448_0.844618567623467"},"_hasShrinkwrap":false},"1.2207071723.0":{"name":"@bentoproject/soundcloud","version":"1.2207071723.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2207071723.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-tLcRqOWn1bXHRiUW7XlhUrcq9R+kU7KUV+eg9cFLM/AV4JinZMTt/ngmo2kVAwbGqRnVn2m3ADFKAy+zrBEPhQ==","shasum":"bd2897247d315f7b77a8ed139ee0ac7da274b78d","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2207071723.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxItJIkEpwMD0iw5IPPR0ErAnIsCanK8tVpKkhPRcIKAiEA1JAuiGkBto+eaSap8NNkkBh+V0Urr5b5imVNgA9eEXU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix+xMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8bxAAhE/zBqluZ7aOhjTuzM1DUf6BlgPkX357fuJl0JiSq/Ymf+XF\r\nnTIoUwsbdk5L9pMHuWu1CKsko31djtkLxblJKvsWHMl7Jzd/iQMFkzzQN+79\r\nn+S6MCtjDevwzWoBTbfLixdR+h5HZBDAMPDV6Oxl5Yvg2CtFqjqG12ijbWTZ\r\n/5D2L4G2fmnWpk5ZSWX5T0nVX7UaiMFZJe5ABVAZCZ7YJ2cKQGdp5lw8O6NX\r\nYG1hBMAzuPLRdoalRbQCjpvXf3GRXGNztLuW29OtaUFBIxheGdoY67t6Buvg\r\n5a8pf3y8eqKTl3B/4a5ERRJMsFvoGO9J44jwnJkBOgQpezXP+Avlu0o4NpBA\r\n46cQPMDJflsNcRg2wGdesEB/cH/9MvGOMC5OPXKLOvymhaDaeNfRcDXLfPhx\r\n/9gzE0eLUHhcdu9EfRvS5iI93iTUacUgevJI7ti999P1gl7NK1HkYeUS1KPN\r\ntaDbc6u5E5MFi0e91Gb5jN2rm/ERLeux+2eevGGG+y6a4Oh6DCZLBJzLJD1w\r\nsPde9BGD9DH2nwknt6k/3ipuzM84YB5JRJe39GEzG8FplshchqHzy8qyp/s2\r\n+fw+HvlqGrit/xHDy2tbtzbg0HT6+3fKgS+CciUEAxrRHvayUayYgvIdKJhq\r\nfCnSvVpomx7vz50UtiNO/EgiZIKMyOGwGwU=\r\n=11YU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2207071723.0_1657269323893_0.8651196379048107"},"_hasShrinkwrap":false},"1.2207181727.0":{"name":"@bentoproject/soundcloud","version":"1.2207181727.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2207181727.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-RIl7qw9foXZIIbOsUKaSJjrqiEyxpjRyZrcI+eUXa94srN+SYigvP4xwiAG6iQDLB8/uq6Wd82/oOOThRW95JA==","shasum":"0e9a2377cd50f2c6fece2d3508d7037a8d3a676d","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2207181727.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjJo5140okuchOYiY4buO/b59AmQElDWk7V/XsnhWG+AiEAx2+Y552xEugZ0OpAi3qunBFLrZhaKBnK69Fp2fqQ61k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1msFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqdA//T0wAImN5fyDCMwFOeVRVhnJB+AgsnNLCk2dXCQQVvYEzitNm\r\nVrKjAea2b5QrTAQQDrhH+L0fs8QCihZ7C4Gl4L2wbsVj9t0NVRpKlGEMzDAW\r\n2IUGY3znjkKLo+9v9TdNY4vri+JHkWh/s3Dp8RV2ljdkkyshot0wSgofl7SO\r\nJF7RmC9M2IXCwAPJbb+FcWWTU1xMPkQPU0gYOm3QFVxnDrgA7EgdcA7uWHiS\r\nVjF2tJiEdqJloHxCRrrnJ4UJqERhNfSzLi4V1xNYAwZwX31VhdeFQVLUXI3Y\r\ndWjboxKaiOsWj36Vm6JkXGKXj3zaMBkPIRavK4Hje/J/xgXw30az77l5vfoA\r\nsi8YR3WvkUjp0D8Aq6JxvHQohLyMWNvRcwwtGCDe4nSTGo/AWGMMlY3LS95k\r\nQXndM2Fis/2LBBSWS4Ksqm2sEeB5T7v5XWR0LGBJQq1v+4hNbm/T61oMF0sL\r\n5tkLQlKXuyEX7g7kR8qwIyDIvcLqJXuplJEYYtzp/KYKgJuyrYeciqEeS473\r\nEt1EouttNhfpiC+k7/WAb7XwvWO7uo/tl6nGaRb2Hk7cvlYm8K9XbSioUrBi\r\nNBiN0MXLRSGCx96eHymue/Bl+jCVBUkgQAYPEK44yKdGVi5onhAWneuCqQgD\r\nMNlsiiOC2jua6skvp31jdwNvtKJiPWrBbYA=\r\n=zvu7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2207181727.0_1658219269435_0.7381439915492407"},"_hasShrinkwrap":false},"1.2207201724.0":{"name":"@bentoproject/soundcloud","version":"1.2207201724.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207201724.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"62d86212e783d34fd2dfa8bd02ffb0e447c0538b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2207201724.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-ih02v4xYWuYRUC95SiaNRI4PNVIvGdO9K3S+bY01xIHU60AT7unybCLg+Fdkq91q1AXXPrFbwbelQEH09RefXw==","shasum":"c6559675ca8b72b7c99fae19b93fb0dd11e093ba","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2207201724.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE74XT7YLgJI8jmf44p+vypsej2rBjvD3faxJsFrS3AQIgIuvGIu+HnAYfpUvRr2bD6ShrU34rq2ww04sjLfOxkOo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Q4sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXJxAAgurqaKfp2bZiwN5kjcUcA2El9H+lQTOBqi9oheTiJ9hrM9Wm\r\npq1oS9sHqyQVp0fNCccpeRVsUF+JwCmgPSBdkk1C++w3dC8ewK4qpP08ved9\r\n2VRvz+PnJ4iNY2yDLcf2wV6Suz5bqcJS0LOUiMtpMsusktkEdZMXtPYAWwZB\r\nf0Lcd07cHVJdhs+XNSvxH9xIzkE5H/yQ5oQi2YKURwsy8BM98lK6aXFSNeqe\r\nXdwrutZuMxMhJX3vAOXY+0abHVRUV+cv+rNNzOr6hTfpz62AJ/FfPGOI9u0f\r\nxnDmM/hDU6fvc48JEwasPyPPimrNfjfWTIGK864gKisOxZUhTPZRFdVYrJcE\r\nLoA5A7WkHxocR/ObwGHmeIAi37PsCJ6UzDlp8WsP9A6naBAbZoQ6WR2N+inz\r\nN1avjrr/DcF5pJJ8VtWdQf7i9xxobYqiLsBR3Y59YsPr75fETJHms+rtlTdz\r\nsuSrPaDcwOXF4tkWtx88p4je+bG0fHwu93NvGykQ3yo4FeJkR1E9P7t+sgog\r\nZvAWV5YOto5qREHafk7Zws07O1b9FtZnaiNuu+8qTpe5xb5hJjnLh9EGgiLA\r\nGCtdTGYTDvLRocPFSojOs+6kNtKtxnrOJMaxcIHf1DFXwOg9HvGHKaA1x6n4\r\nAeaXwURPWIEAHmCeOHWJLFsGzO5E/XstOM8=\r\n=98gc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2207201724.0_1658392107676_0.12179593468680605"},"_hasShrinkwrap":false},"1.2207221643.0":{"name":"@bentoproject/soundcloud","version":"1.2207221643.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2207221643.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-AJiMTm2kAcsE46Pl/Xgy6uq4b06JJfxkba6KhFmnABRj8Fauj9zIcG6wNDLQCYyWsmjR+5eB9fXCC0ZLvXRjTw==","shasum":"39910de79f97f837cccdd53dcfe3f1f3a81dd358","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2207221643.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH1Rdv2UK1RFFs+m8tARfb3fYB4gsa69cv/k4Hjx8AGcCIANX1uPULpT5TVPgXgV4RtLWlP5iunHEV1iogaylw/dL"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi27ElACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoY/RAAoHZm2YVKFPVnhN3WBcjueeXHgYMwfqR64Ki7DXchH7iON3u3\r\ndJqvpJ0Vd1R67NAfl+sp6BNtLScJhlBvbpjH/rKzxOoZ+h4t0eZaJpo8G0rn\r\nwEnY17tVgLY3hrAKMaM8B3TaRSWBOOjoJ828BeU1gvayu+UhDXGjNMFPnvLY\r\nshbqNhevMQsPiY1bqfx1WijPuDukw5aKmj+vBXQ532FDqMlcSwerjpWAyuRO\r\n9UOqNpjc+G7jjuWKL+jgDafRXOY7yNCPi4E0OXUldQo0lr4mb9j4lITytMZV\r\ntJTk2pJXbD5+pB5dk64jCOOmiq4nU7+6ze0JwmXWkxjs/+FkCRyVfhUI9VTO\r\nc8JqET1IuSV8s2+FiDK3Y/IsI0AucInd7dwwpakxI/ecJAHaDqwToBAGMPvi\r\nUDiqiiF6PrUitIjbht3bgbQ2FJDn/HXyrYC0akXoB9lF2mXpuDYm3MmUnD3X\r\n94TVrrRzEKOo6mK3KaeRtvhp7fyyYzbHoVRI5La+ZuFVk90mFVm7U0L+Q/JG\r\n6w69iChoTtOq24+QosGbO1wojhLSjWDpS6poVks3EgED5oZC92zboGpBjNiT\r\npO5kTzZvgFBHdem2totvtRW7nMclgBRP4UaH8oYpoU5V3/+PbERUtuPEO3aP\r\nC64d4+G/1p3foSBZ0cOjIPEvZ0mqBA1bk6E=\r\n=pO3K\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2207221643.0_1658564901151_0.458316906148063"},"_hasShrinkwrap":false},"1.2207261725.0":{"name":"@bentoproject/soundcloud","version":"1.2207261725.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207261725.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"b73520d61dc1a279ec10d2a27f58891e2e2d5d93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2207261725.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-HfNrt6o58VbUBIR5h+JrY6GIDpOK9zbeA9sDBD5cLet0HhtbrE5/IM1kLxyJsngTq6cnuAtGxTR7KWKsoQqE3A==","shasum":"b9ed26f600b3bac42a068537dfbbe871aed92ada","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2207261725.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnPOAfi7tGNorcKUwCj6KsDf6P+v3+Ems5CpCBbskrjAiEAmzI+LIBPDxK1tbbthiO0CuEbY00bRXnx6Qgms/f/c84="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4PbrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6jg//ct4y+1IFGO3LnXmQe4MWwRFl4WD5/nwdzD6ZOpoe7rZTzLlY\r\nkoI6h7yk0fMiE8IHqGR+DvholZydC2czcdIept5Zt9+Jcu/s2JI9iOh6ZuC2\r\nxHSF2I5ZAY9q7Klmjq4WTo/JCffxirELecwOX9oJp0gZOvlVQNtm7ktrj5D8\r\niKIdCJ3pqydc8CuYQAaiipWztiQsoHDtULRbHmjH09s8KhPosP4geg7xJjFx\r\nU2TTCkBlRmYBDrj5ZXIYooGfnRGs+oNC6NrvKs1yDoAS9TXOnWeEdeS+oXkF\r\ngmAkOVnR6wZCpRhRAOuMmaJ3bMLhha1XnWaw6TbvVvlwM3bsjb/+6EBUWapd\r\nqIBoZzCkDwj2UtkO9+38aRWNICxESaYN54LkdypZ/lrk9KRnbnT1D/606Nwj\r\nn530zH5zTCPDQPF0EVSrIz7oaaY0rmni8Gn76/f1KYEiq3X6LKJmpIfT/CVR\r\nImib1SU4m7B1/41E6y1Ii2xTYQxU8saNhk4F0obp0SaVO78koK6sv049L0Kg\r\nddFiZXoSwERpnmD0ppZX+OvvVTWcnFg+0BECagUB3bAtObMvTym2dfxQsery\r\nKDnxgislq965Uea18kSNP8HpviA9F/fdnK+htA97+iYnS901PlZrPG9X5k1b\r\n9Tda2VpmzmfV+treS+PhGuKbTRiA/JSZoRU=\r\n=+AUH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2207261725.0_1658910443502_0.015251745774883085"},"_hasShrinkwrap":false},"1.2207281718.0":{"name":"@bentoproject/soundcloud","version":"1.2207281718.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"5e3f3eee6148e0ebb57aabc48ef987e9b5528611","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2207281718.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-q5kzmCVr72M0ao864muAAOl6REt3ViMwuHoB/vLjk5HoaXzxteECOAqF/QiAqU/Ube6oy4nq8CfNa5Zc+oMFbg==","shasum":"3b91b6674c673ce2e019101c9f958c296cb3e717","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2207281718.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDS1b90aogMo+sFZR31756eksX20GD5FChrKYmTWPnzWAiEAp73lefJM29QSSTBaaTbbqsy9SL0LNC/WtBLqyqngptA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi45rMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJIRAAl1zeGb2E9sc6opC40cHvQu0omGyiEyObLEN5m7q7HgjQ+LRQ\r\nnUZAAx7Cfy4punyyO6I6eG8oVWo/rH9EqBGZ0RDpPXxfGqlZZHpfjH/SP/Hj\r\nAfx2mSMjD7tvHJTeD8gcRNViROqcYdc5pWc4qyR9Z0NH4PAnKj21oRPWAa+0\r\nBew7SAbMvSUgE1RgCElv9sNQ/JULTPpqWrIUGEyLklSL503kRcGa2+0gJ4Q+\r\nDPR4rzaMIdW4jfQb9eoH9j87dhEdV6bDf/eRpt/LbTVNOpEl+m5jZM9CwGZ7\r\nxYJy7kHbavub1gbT36//Vs1UJuaKLOKhonX7O/QFHFO7lEEgoeqk35+wKs6U\r\n8gKSIM85+kl/ywPYFn4F4Xfwww53WSjcRj7XL07kgf67M+Y/gmcCV33tiIoW\r\nDoCAy82K2cj7fd2ZnPV1qScse6m9Nu28NToiqycu12wpmjoK5UXmM46pGdnJ\r\nPVde34vEcQGGXb8nRccc2iScj6enW2om7N459Za2Mn32luO+qbVCQhu7jNKY\r\nrQmj+7a7FHasMsrKBLNbwNnM44XGbfZzj2GPaI61QHGXHZQ1jWrwwrE5r42m\r\ntr2SavC9TJP5yb/ekBOSrdGdmKdKBM7Ui9Ssf0up+JEnvK/hYhN7x9bRJZp9\r\nWMvSkftsbogoABuEjxXIbr0gwCljj44aXxg=\r\n=X7zV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2207281718.0_1659083468160_0.6641245969649818"},"_hasShrinkwrap":false},"1.2208021808.0":{"name":"@bentoproject/soundcloud","version":"1.2208021808.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208021808.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"b82b832cae23ff854449af280f1b02f4dfeb99f4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2208021808.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-PIiWSRn3J5i4O77tz3kSAp+8L443hKaYcCz4UCzosbJRDYJ1ieQWnX5j1NQCRgizPkCaHTNmTlDTGPiojq06cA==","shasum":"16ec7d86ce9438e784d1b4ccbb5ab1f34ed80b35","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208021808.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF+bz/hlMGItKCZJTjN8MHokUqVtcOtsOh7iBI2ZTuNgIhAPIFF9xfz0ExhkOrHYWDZuRk2BAFEG6Y/EK6CJhz1nNM"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6jGyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+5A//WJ1VgEg4bnVOLxVph7A54e1TFKfmmPAJb+hXe8rSczEQWt3J\r\nTz2sza9mbQAPK8csSqunQMpTgz8PpmxPNfo42hRXpPcWwFrtM+aW3Nbun3SP\r\nUQ0YLCYYE7UBKIEAywK8aeDIn8mT4n8llZ7HYZ4EWEich2xhZ0X9sprkmf7R\r\nf38db41/wsnqlxPnd3z3aQnOdhczzH7nCPLAJKJQRJRAD9ECi9/AFGY0nGjc\r\njqSlsMYXIaa7rv9fe+upf/zV8bXy3GybL06RfLIhcpnszKXE+TaialcdFQVM\r\n3Iw9Bw1MdO0OO+LAzSHeO6Vu4Sb3MUIIduJxhV2iteR5SB7TZ4BSogCBHAW5\r\nl33rntqOwleyOPUM8IeovWdUOpB+5JjZdA2ptHAz4zFdkAidSb6cvUc+nenZ\r\nREDs2xYd10RWBaINrFaev40VBwjlrbFPd/myCvzICC89t4UAff3DLKHUDXwc\r\n9gyR753Kvzrb2+VE4mPfNc3+oCw/Um12HQVbW8WNRBdeaKI0rsfcsAKguF8k\r\nYxQDAAuJDmOW0HaBnTwAPbiexMEDrREY1zyEuotQ8YXa8rMeC0wxs6IozKc5\r\nG+HVKdqKdibFjEfpIyCSzyBEaOM66KDhK8pcmUHVhAqcRhbV94d+j2foAShA\r\nj+KrRRkgNehwQZpa0WWMueCQrFUn6QAO9hU=\r\n=VtwM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208021808.0_1659515313857_0.7897575944420943"},"_hasShrinkwrap":false},"1.2208042017.0":{"name":"@bentoproject/soundcloud","version":"1.2208042017.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208042017.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"598aa15d3922507a106666aca29a90334c7b2c05","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2208042017.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-lbIx5N/uglaTfwj4RqbrxG6QIl0NaK2q48qJ651Li4d6u1JKOYno6sY8qnIuqk8KtqZiViesTAwfWRjEp8Qf6g==","shasum":"3606dee2918ef96558ee65ae3c52b39212b49bf4","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208042017.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzzbwKUuHH4TvysuyJNV5Jd/VrdbbCknNz/g6lFR85JQIgZnLb0fVnD+z9isdLM8aTjjSBwyl3sN9AJfsLEGK5dv0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7NUYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv5hAAowQsLJoCEmMvV2y7zghQ5b5++LDPhEnl69OSGWtOK3kH1bQk\r\nhY+g9wfohIsdV+xsGbB61PMe/npqTY2uBwj0jJp182jR4eOgrinLd2kljBmf\r\nLUeWkbT2eElpxYXl8CviWPu1kaQcZwtn92AIDczgB3qcdIVZwoZwDNfLPTQ0\r\nHrX09XvMTGCiyzlCiUfcSgoCxsGsfm3OLPJN/KOF+M5VdzNTlkFan8XcO/Mm\r\nAF7zpI3mrdP+I3ubsq+IYzWWM02Zvauknr7yWGjJulKV0nwq16NI8DYDMdvZ\r\n3f4XFZ7tqjbrXZH+SEkYorSLolXWYW/Rx3hyMY7oxSTeQY8y1FkqFg4x3Oq9\r\nr0gMrzRazSErI2mIhjUzWzcDNKT73qm+XSK8An0K2PmugWgjJ3gsXZSU2x7/\r\nA7flTwjVNQqYlqYVfuLi4eZ1B+s2TEl0yeMll2ukuhkK1nBn9b9A3hUi4SwX\r\n7b9OjnJ6rOqE/Y3i4ie/+dEFMypBOhXrgpzOYSDbPxTjPFc/Xx13Mp8kOfIK\r\nL/dglG0jsUoUeVUnvalfxVnmXkBiifUJ5vshpD94bz9uAzYHeFn0Em+m66HA\r\nhZzcbXhkn9nnR+pcmj+nxMI4tZ8YzBRU+j3pxt+tQky1D7vN0tNHBVGpv8y4\r\niZNDwBzXiQsZ9Zi3UEEMHDNZ+cWvBLk4P2E=\r\n=mqcL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208042017.0_1659688215795_0.9526377320855153"},"_hasShrinkwrap":false},"1.2208051912.0":{"name":"@bentoproject/soundcloud","version":"1.2208051912.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"5f50e49dee3435f3a242126437de7cc8263c2ea8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2208051912.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-8y5EzUHXoyVqGHyvJvWTs/HB1/3jo7i1AeIB3qk9VC8fZxDrxos/FR3CHLYMpN3s5ol4NVKTuPqoFqwaT/i1wA==","shasum":"957dc4f1f30b3ecd7e9dff7405f8cc90871cb3f3","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208051912.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVVyVwbhS0oqFbmzEyC4AGrHixzOXPXggIOiIGNLWtlAiAqq2I0n8rGnY9JGq56sTksrWYtfIIC+/c+BE8gluFCNA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7iZVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9gw/9Fnd+nBi3Qxgug2g8yebziTXWoeS2diF17gTJXMrltdOBtQbi\r\n5cpeYtOYpfEizaS8EYGFre8r1W1BOcd2TzRIMSuLo7UU+mSblPXJ9P0Jk+9e\r\nfxSyYkIa/n7hIDhm4xibVOiKGUZ7tWeN0N853TyXTIWl0bDw028xs60rBarW\r\n/RiUPvQPcvIfPy7VosoX1H56GtrKcoQL5h0qlESasvgEjk438IZoXOzG/Ims\r\nPwzryLcRuQVfmXdrD5Nd6uYZIcxZP2y91tHg4CaUFnmehxiUZ1Bz5Xwz+zgn\r\n3sVGQcM7KhmUaUQ0EceUu+BOujEHRBFwlhRp9sqo1E6FW3xJd1KsNmpfzTdz\r\nGf8dpmcWNir88aJeDMNDcNDNv654Iqjo/TEN2zdGrPa8VLm2wV55jcbMwN4v\r\n5iE+NAfpCAa2SSECpC3sePPquRT/leugjTaMgfyz1VrFPAxlJS/wQcw2PF1g\r\neN7vnK9wUl6/98o7cR1XPUr8d1XFUqlxex9mDYXnVvNmizsZgf/3sRkikU1O\r\nb3SvAguxqcK1tPmRS2YmqYSTIP9/+ZPzjEntKArnZW12t30GWkEIeBAL1TGE\r\nBfQbVYeaGvWnNKHro7x2ApjT5iWOVYFlfz6c4d/52jsCFf8/OHJmztH5KSOL\r\nEzF+cpADuEDGvkPCWrL2r5nUdbSl4ga/cS8=\r\n=bueF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208051912.0_1659774549619_0.878129459663268"},"_hasShrinkwrap":false},"1.2208081650.0":{"name":"@bentoproject/soundcloud","version":"1.2208081650.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208081650.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"beb9a33429ef933995a664a1aa534cf7ac0984f5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2208081650.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-cM/ms8efsXvSxlk+SQRIInDpfKzLONXQcMPQqJDBfPF9lGLyf0Wi5Cd+yO84JjKI0+EYlYZJt1Gh5RdBlMXrZQ==","shasum":"4dfb981efd77a64bde1aec9f4da6f1654b1f0285","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208081650.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKipJ0nBfy3QwSHqEbONCr/qms+ik1+6JWt029F61FNAiEAjR0knHoqff9dSZXBXRscRI3a2fmWcqL9hWeSFOik0Ug="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8hrlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqhyw//V1TCuPGdYY+WJGFregGZhM3dUs3zzwAPflc8fpFKDqRELsZr\r\n++mJ0eUT9WgDltmwFABaFWSjz/0g188vfBSEtl9SUyn4I+jMdgcN2J7wkCqK\r\n5zNFTNJI1MzJA6Hoj1kwAe3qdyam6PiNNhf6RQWYQV7sHadjlGfY1bIQY1sh\r\nPTEUs21ffhn+hBOc1pgUs4wLIue4zMdYJfiHaCc+g4NNyxMkHJvlaU1LWkQq\r\nR2fCCCH/xynJRUx6Zgr/H5jK/Gv2Plk4w0vVjwF4YWdYGfrFkHM1CwNmDI6z\r\nEqjbOKdgw3H8jvmEPgvqGlNKiePLOMvAPdEGy+NNEzHrndITBW8a43mnvsib\r\nqVmLMJhh3g2RtKaVoFjf6HslhIKzPWucbWAjxKLVqzB2+0V83Rhe5yPIxtrE\r\nFMpI3o8FVK+JatTHMgCWl59JzeMstEIVXdY+eJ0GK7/4mzGipjR5fSPTswan\r\nwZcNbUv+fhxVqYrmnns56n1FpZWwy4Br4SVHjKapGBEyFLjaq+/zdkKbtJI2\r\n4ogXsRqHmKmyI1ghsfEEgIPgZoBtayd78Alxqgn+fw6uxZyt/W/Tfe3+rXm0\r\ndNUCYQhv07ns9Wuh+w+Hjr+7K9j1UOrUF2/f2G1vhk8bD2tKccODLLthPr0V\r\nRSusoBdOfEFwAb+/hKTvzqr2KMwU4xo2wTE=\r\n=hLuf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208081650.0_1660033765464_0.7616205440756805"},"_hasShrinkwrap":false},"1.2208092047.0":{"name":"@bentoproject/soundcloud","version":"1.2208092047.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208092047.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"5147b5f8b54805bbea52be75a64d125a06f88aea","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2208092047.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-+aJnqCbKLFW/CfQ+dVo474Rn+8G3ItoHTUYWK52jR9etqZS32Hb7qly7rd4RJinB4w3ogmj5pgWboTit4MYqOw==","shasum":"9691f8ae42b8d32389538c14717c31a91577ca46","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208092047.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgYgglZuMZeQeU2oAHaqC34ffSGHgnTzCuhLjaiUPx6QIgbgiutykRrdsrA0CfjAKUWXk0OeVdYwDmITjjY96nQQQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi82xJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2ORAAha+6yiMCUHs07oOzeuJRtyUEqeeNAt/cd9kcsJopkChN2Yj8\r\nB43xloI2EuDDLP6h8N1aH6ZKBRM/7PtJjyGSW08sTEFc9sNGd+asZhigaC89\r\nNwsdwlnTDvpew7Ps6KL1SdnP4LsmbEXu0GFGK05neO9/6ElHaPe/vqr7KHij\r\nSlMMJmGbzVGDmntuBsovkalOAnVmEJkx214NwNlaOMm6KKC0BSdNRc9y2JdR\r\nx5vacO04TTVpoDtfaOdO2J/4sc9+wUx/1iEjzKe003jdzT6yi3QMf9uxUSHR\r\nPECh7YWw1U+IA39FzTWOR6y87Ca4tmDC1dqNj6C6j6URE/VG16MayEJGBFTv\r\nZ6LtXcue+NA7/+7rVEH/JcR33qpavPf8Zs6x+AfCDDJ23Ng7CNJ3Cx8HjZ8z\r\npoDxbsSC7ZFLH03OY2Dpa1oV0svLexzRmrTytTnrWpPQ0AX4gPA1Khzt+bH8\r\n8yBObAcqfNP24VsVLQcz+pipkDTfgaduo8D5jBu9AVgLlp/IQ4sBZKpUMeZF\r\nFs+qhrsgWavBaG6tNnB9ddir+TWGDpkjO+jdj5NHYgZTnx1h06puzzWwa8AG\r\nbBxGp50cH4JdH0fqz39ze8WaJBTobKPHN22Ni5HyMWwK5hay+uZ4v9QbBe7W\r\nYnge81e685lR5oFmwurcwgQjdBIHMYPa/oY=\r\n=FOcL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208092047.0_1660120137770_0.16615491246982694"},"_hasShrinkwrap":false},"1.2207281718.1":{"name":"@bentoproject/soundcloud","version":"1.2207281718.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2207281718.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-+AQ8OuEnFQ3tIH6baVEB+ybGXqXsdf6UvcyHGtAZ9SSsz88t1bGMBtWPsE4aNOI7jG6cpsE8SThIX76R18dAJQ==","shasum":"f3399673d3fd41f9679e86e4df5cf5787ad0f156","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2207281718.1.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwJGBJUiVK/BWQEkaY/3/sCMETHiDszNsknibrfBi2yAIgPlzuWlfWF8Cr4JKjUtm0MfLhr7jsDyUWDzrJpaBvDaw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8+P6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2gg//fjJJZ6tUqraKTiz+J4nCCnf/Elf3oNPQnd1suSpd8lg4YNfg\r\nffBcC/CLI7wACPwhi+GTQiw5nwITpsusHsBTmysPzm3gmnokoYrwFM+gYHWk\r\n/Zctucne/XDa6nz13tfkd7vEmZ5Wogw8ys0ZxdrALQ6fOvJiqOY/Dah5jUds\r\nShlq8VopuwLWXyNTd4iTWCtq3ELGpMhiKKKcQpwA9FTkekYN0/my0QMud3TM\r\nm8fcF0A5fcdqhCSLXho7fsiKt4T+rBaqPeOdrP7XPNUDLAlMA1NvOwkXkUKZ\r\ngvb3PrVGLgf6wLE4PHW+u6D0vQDu+gRkUaBEpvy3ZT7taf160xiGZ0G/9hPO\r\nBC4gc89WyDldplAJrZo9W6wfB8iYEoS6ec24zvGlOSleERC/G7Gc6awHwdmn\r\nHNurP4ERMx+nALAVgJz838CcPgsG2HrJZpc4oMmPi0eSok5tY13LO+x97P7G\r\n8z6UIVUV++x6YGvS6ViBncEa5S77QI6Xzve7e5cN5mJEdPnEJzh+9RQD9wJY\r\nDEbPNN8yK/rMJ8Exz2g0nHNrqbzaLw7N8TeKlAMPvBmyHFbbTlZL4Vk1xUFo\r\nZS0NC3x22LGajRV4Kl1/MWLsURXHMDmMmhiMlQJANSiA/5LaDPqES4/qAsge\r\nnGjpedcDLUO1oF7ost1VQOPK3bDiQQt0U0I=\r\n=yGXm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2207281718.1_1660150778299_0.5408646292566843"},"_hasShrinkwrap":false},"1.2207281718.2":{"name":"@bentoproject/soundcloud","version":"1.2207281718.2","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2207281718.2","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-XYcqIYb+9wU8ND8g4kEw5kPH0pHEf7jmCrxk1GCEnjh+hk+fA394EkLplItw1lWt/KEaBSG5aMTXU5sf+k5BRw==","shasum":"130190042c10776bbb3deae654de2ec73dd0be1f","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2207281718.2.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgbzqB+Aafa1I940t75tTzz7vMkrTQPnYVsWILRu/fJwIgbnvgZny3ABgXD15A2pXmuXnsb32XmkXWeHB6Hzy0fMY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8/ZJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUXQ//XVxtDLCc1FO2GiSzrooSbRZfiwsmWK5hPCZeKmff59zgeNOi\r\no8ZuFj9f66XNYcjFfJJL0NSGkOWDuAzWHRlq0jvqOJZytz0nQ/sMW1wVVM/Z\r\n8VyzQf0YQdIcZTj29Blg0Q5lvf55Y/632khdnJi4vBPY00S49IDmZowAZVyv\r\n8B8+WkDldEBHqkKzqe55Ricd+Fmgxzew06aTA84kUbJAguohXpJzFBmIitGV\r\nY9lsfjKebtEYmADTfKmaWqQ9LnDY8MMwtiH8gmxtXHsx8r6b63DqepJ9MOLQ\r\nSqrNcuSEVwn0ah5WWZ9fTV850NtskhBKM+Fm+f9Jr7rlX+WIhgyfVgBohHdC\r\nrHuFYV7jVYG0h+/f+tm9BcU1/v0RznOxtsgOn+S/35C6RneNXsfiYv1H9MJv\r\nFdIM9BD+HjXtNmhco6zev8s7/FVmX4ecNtt9kEfS8/7JoTfSKqSFHss3Mz60\r\nBnv1gGZKPVW/8r+DGn5PDXub5No5Ec1GLjfgk2JlyTv3sWd64vxBdz/HGdEn\r\nrNWss3UI67yBWRGVKVoUudwlTQ5cQIWqDKXgFLG1ATCp7YV6pueAc9Lbh+dq\r\neGyP7JGfL7JvMC1JioCVPYRfXpQDIQEkw4tpuuWvm4HSnA6u8yWhEkdYdef2\r\nSss0lxqAAqXSTpibOxPg//O49w7T1ZP94F4=\r\n=UZMs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2207281718.2_1660155464964_0.6828281751867751"},"_hasShrinkwrap":false},"1.2208112015.0":{"name":"@bentoproject/soundcloud","version":"1.2208112015.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208112015.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"83d345ea27d61c78ced5f68848c4f342e947fab2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2208112015.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-s+kGNqqkCZCPi6t39UaGbM8pAtx95T8ZFom2S/C6UxrchOnsm64RsNWMfCpjR0tFPmyVKhqWd4QqxwWsx1Jklw==","shasum":"d0abdddfa15df6ef35d49150b80d12029e6307a6","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208112015.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7cDeyJx4uYZKgFsiitbM3cxGT/F7xMOu3x68lnMmW9AIhAIQ3MrPtET3VfuWCoT2xCrbMsYqPqTp9+ghpAs49UEjM"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9g96ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoM/g//UtZrlVfSL4U/hZlntmITySaFEqbo0dPFgDl5wr7yNFDW95MJ\r\n8U4lSSWNh2PfkecwO7rtawPwDxMmwscPSkjIZRBfI7KiUXPSOjXbWjf7MA0u\r\nyFrSvZ/1kJ5IneMBr86j22lJMBa5dighxccSgyV3hV/SsqieE6041spqariM\r\nGWf7N5ir1qn/ecZ+bzVjAH6IUc4bZ21zHm06pVEqkQRl/wq38nACqx9ZEZPo\r\n21oUyb77QNtOi8SKkbqmf5lHmi5k3pcZy0uCQ70KMtlIhz8rSBzmz9hcwW6D\r\nQUso17xgH+FoDWDZqyA36HEYCsu9EYiH++rSbRHw3wzvnQVo1GtkRI/s0vLv\r\nhs3ipMdWqMVrAwt3+Sqy3XRp0SHEl5HeXjGrnttFf+wYAzPMzCLd5TCJMQxZ\r\nxI+EyNG1BwMG7qjlPr6EOLfxEqXhlSMARc0e4oT+21a4eCpS3qKQ9WyTZ8Kx\r\nrKxISVJwa9jc20t3/PMh//6W6Sv2adPsvQtodZ3bS7EtM0hhEZLeXJC/afDg\r\nKytGTFsA3TpwUBaVTrzEQUQCbTGuRHXNB+g2jN0fDZsqH0hlcEL6Z3+sJJGj\r\nu0q7UDVvqobZO/yCsx1up+Q0Uyvxxy2DXtQBEAukwkXSygBeC7F233kz1e1f\r\nmkMM7wa6qFM+4uLsEB7T17vfsZg+6POACO8=\r\n=Mt2h\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208112015.0_1660292985764_0.44691649349105433"},"_hasShrinkwrap":false},"1.2208121708.0":{"name":"@bentoproject/soundcloud","version":"1.2208121708.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2208121708.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-jWILiep6Ab6JxNsU6NGqCyqCfxQhfN5QyPHOWJaQEndJQ58qv+GnwKqf6sNBGnfxFS6Pd7DC09Nr07zNIqA56A==","shasum":"aad1bf38965c2406a3b04dde5ab02f2facde2f29","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208121708.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB8ih8Kn2/9LrTI6EVZG517vY76pB0puMfrWuxnSc5TgIgIv77SkT9p10faufRVfmv4K1ua2zI/8d6xkqm0M2GkQ4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92CaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Kw/+MReepgyXcqoAIuoeBsLJb7LTWS6PfZcj+T4fM/0P2w9gLOxs\r\nJXAUD6geX7C2Oc3dIWTVlKmp5Ffn5Pg1p28SFrqpbgZeqQ5tA+6wUmuY98qj\r\nskZSt8LYrsEQVFh8V0i/qUFovPFd2byW7fPgw9/EUND/NSN0s2gp0g3dozPf\r\nOGbblp3otCbgxCorhvgXzIax3W2GxnZ1WYc1n8uZT4rsgWhchqp6TkGHBWlx\r\n7nTpLNS/leeOFKKYL7ZWeRvKw/Pht1aqhCc03W+JHPLb522WceOKb+nbsctz\r\nzlKQAKwzYpodfSN8sTKaVhUdPR+HdGh1XGZZjLq0av5QJDxxkLBF1WAkraZ0\r\nCM0FSUQkUXNYPqi2Hpn5rv2VQh9QrGFjp9JLfEe7uMYeybyisr3d4ymOLQtY\r\n1gQ4GM3hmkcpcV1mg3N0GS/v0qoGIW9JXsEMgbCGI1yVYOmQ/cCquJmelzph\r\nMarq3zpOUDKmiDdL7lKTfLfPW2/irIjQuNbEA8MkK5pF8GHUCtXRXQt580II\r\nFKiFKz4CQSOFhLE5kLvieP1VgfucYKc7pRUj2mgw9D94VkekG26jzJCpZYkN\r\niR5GBVuhoJ+gUFcmO4apAEBvpkXueLal81qAlvpUOh6xfuwNbGA6dzWCtmbv\r\nQEFDIsdO5lObJ1X/MbSPhjPsNLI6iPBTio8=\r\n=IdpG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208121708.0_1660379290392_0.10838626112987693"},"_hasShrinkwrap":false},"1.2208051912.1":{"name":"@bentoproject/soundcloud","version":"1.2208051912.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2208051912.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-nqwNNt63S5nfiIt3tSxgRN6XP9isDKiFfCKFxPxQPbcbyMdMcpj0OpZM1IYWPX2OERSKiCIC1zWdEJ99RAFcwQ==","shasum":"fcfaca531cada7e8f1b0a2ec656f77fe124b3698","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208051912.1.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWncHYYnj4dN4wEPl1gB07C0HYcm++ujlXOqFnSI+MZAiEAh07XjEoPHderL+h111OhO4lGibS++WGfoog79rWj/Js="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/CMkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozIhAAgcW2+yBLTINR/XmHO+W4PnHlWh0n/cgDhS6zrjUZaLpVszjP\r\nijQuzfDqM3jIUmiKhe/239lUbucS9vUCT15rbOXTa4i+iSkjR2h+WOg57nOs\r\nkHUmS0Dp5VmYEB44Rc6LZlAx0L1h14J2xQ0naVhsLbetJQqWFa/++OqRHb4q\r\nJ7eomsSBAq2Poeu8GdbtAfTGVA0I4PVDgw+d7OzRNT7NAbF5kbY7daNGP6Ok\r\nxSV/caGGQiRwJDe0rZJXozNUuokuIw1odms64P6IiXH6DucaDiilW9csvZyo\r\nUh2WRK7lFTWWUt19Zn5e/DPfpWO6QLLMMsDbM2yPkmaRaT6L0QvA+v0ZzYD4\r\nSx8ERF58+HwvQw2Ss9/HI0j3rBkZ/lcZudpmYjKvmZAbvwFPtIn40A80wTe7\r\nEoR9/GqQHMwtj4XCWDWBdHPaM4BkuBg7lVuQnzY+bVk+J+1CV/fPhHdWsr3o\r\nHdNQTqoco2iTO/PMD6g9nYti7Bov50JIAvFSHzNu6WPYpIf+TxLOZ9vmQCxc\r\nhmJVoEuw9zrEnOBXyZFyBWGGu64WcPnqQaQtVJVeGf2fozqPE8XIMo0RLHFc\r\nTTHrg4/DoRep0NuiYuqgHj6Zr8Rezt4nwt2s440YsAseYgZWq5Qn1BK5sC30\r\nRwqnViiEJFZQHRZ0tallm1nK5yq38MIJwmo=\r\n=mG95\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208051912.1_1660691235787_0.06716648973523198"},"_hasShrinkwrap":false},"1.2208172101.0":{"name":"@bentoproject/soundcloud","version":"1.2208172101.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208172101.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"372d5623dc25138bb97bd48cd5f97f3be8008658","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2208172101.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-1Jf0M4UWGnSOiJrK19klbxpjIFyCDVHR/am9xMASl2iGBTt6vKgtiU81cAZnC3dl8un5Gs4bNZ+OopPkfKrTGw==","shasum":"c4f0cbc550ec6130c3c2f8e1fd8eaef307c69f3f","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208172101.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFlXKssUgfkio0kK/jl4U4L1P30PeGdpRvpulgpsUWLwIgfnbgJlbrsbSwTUUyC4Pc4+nAay/KQAuLQOEOHzuNkSU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBpCyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2AQ/+L2hM3S3X3JUkiiS+KAK2/00E3ukFqpkxmHIkDLKOfjAJmob2\r\nai+I6S6flsycNZibcnOpzFoiVairSubma9gKw7R3al1D/P5QE8XYabgQo/8F\r\neakYpqKcVlAnzGUi80lcOWZrkRTliildl7wSnmhK+ZXdnVFQQiYW8/4se2UX\r\ntZ5vatKtCc+fmtzPhF8Tv3WusTFdP0dnmM6Ml9dt3pjOOIPsTvwv6WY83KBZ\r\nUX80cuGghpq50i73lSQEGrrN+5oWFSngyZLR0AkySBR6dKZNNlC3CMgCuLCc\r\n/nW1lrFrOrDYA4JJNqn7vcDnFyGf/GKgkJURw9QrgxwAqYCP6cOSG3kiBeVo\r\nLj6456ZqqYyUlqQ7WRDab6y1hyuDYCDShUWnvJdRKafnniwyGH4p0JyNoNyG\r\nuYaVSloEChNrzwYJrKKuEEjXYKSWFhJFbnp1JWh29WohxABeFJMImxpQHQKf\r\nuGnSNv1EzUoACe41t/k0I2p0o9I2J4GQyq4k3M3DxtL1MCB3jCEcsDqwfEu3\r\nWYKBYAdVWUH9uceTh1bgg1teEAb3g+ra78a//u2Os7wl/EJ7d1RUpFcLm3hh\r\nLlu3l7D964yfHngI5UkDaN6FcrSOPN0XpEO8a9sVKOA6aaxv1/ivnhXEDe2i\r\n+xbBwDp0gIjL/2xmAlKiFAKxOWg90fxHiCY=\r\n=SImT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208172101.0_1661374642042_0.30365931430259496"},"_hasShrinkwrap":false},"1.2208242209.0":{"name":"@bentoproject/soundcloud","version":"1.2208242209.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2208242209.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-OdDGmiQzH6a5Tap0ihbIeUjup4uR+ZQIR+AwT7ycom9gkXSBHPAoCeKYbzBfd2hO1Tl2LFEBCyzPZPPZy3UxWw==","shasum":"bd32630859b067ca8db93f94a8bd74cdc4bcb21e","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208242209.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeSHcJbKGAQOnPPvWe5CG8wrGHmW5mjWFBWXw6NSwIngIgaaXPwKi7mr4fSavL8z1qDQpQrJ8H7cX8NGS3dRpkp9Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBzKvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreLA/+Ny93C3xjDP0jC0HXf1HJnGJ6WkkbmNI5w7aT18Be8uf605i6\r\niABE9c7LA3Ehh9nhgsWlxkb5llVNjD340z5f9CoQzdgvxipotNoMhCAl3Ksn\r\no3/vzMxTiZ6NXIGzKk4mC7knobxmgNQw5fqzCa3+HRw5GPS/YMMTZLAbhetx\r\n1u/XEDSvoziQEm123/WycdwPkrKkM/mixNCBf1GgZD6TzUnf5Iav92QIqgLn\r\nZOenz6ElzsX4iFRZbpZOiOz1O+vSKPPRb2ATEcnjfdfv8DQz+DXpsVTdZadM\r\nWONQotxH7vx341pwg6e6d/YhEcyOI4toOpkqZg2uVEnwAEmf+x7wq2UShhQd\r\nLgL0zYHagiWldxsBlJIH8ma6O4SIMXDg5kiYNTMBg3/D4zOzoPiX8BtiGL0q\r\ng/0DKtRHL1phL6ClmitPu3nJZwULzJb31XyhsAN/8XRXDlIzoQMiPfE2m8QH\r\nTbuSjrHZxajE9FeaLvy3Xqbc+8yBnxwx7fsQvwWT11PsAJNPIhFeLW7VHmUs\r\nUEJyFXTaZuU9IOVU7K21QATVkgrVuAItmp/bg8tQjzivMR/vP4E03RTuwFmU\r\nrGguuJ79eyz7rZ5bH2uqYuQP1cP0eBmjmdK2k82UP+b26u70RTIdGI3BmzS6\r\nFu5wlfiVvn8UZQvbIXRVZ/EyLi648UbntiE=\r\n=Mf8S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208242209.0_1661416111136_0.34520863926539125"},"_hasShrinkwrap":false},"1.2209072154.0":{"name":"@bentoproject/soundcloud","version":"1.2209072154.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2209072154.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-zYoW8iGfKikCeYgKQ8LFUZExZgvFfddnJy8W/bC1D7BE6pOlQB3C0/6e7a5FQRoNUx/yXg9dYxVvl5R4D/cNjg==","shasum":"d98405612d89b7f707e207385090ef3906b6a1f5","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2209072154.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNsftemThTz8ky5aifs9jAgY22stl4fwHxVMhC6fMBWAiEA76CiOK55XvxaCYAj9egMLPNmJrD8XJGaZsPImMj/eio="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGadAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmprnw/+NYQ9p/XVf3uWaqIHHRHdG4/dqGLRpV//b3BRx6xqOrf2y0mQ\r\nkarclF327arTGtR5TEQIHs8FULvuLlfxkRSllOkCR4BXNKydrC2DvXhYXa8Z\r\nTlmimxtbjz137abLRN+TXG7AftLkrkOWu7CY+kuzSEOcJTCISQUKcSy5KTrq\r\nFYTksu19MMnrNIHkp6fbK05GB93YVsaIezYASWhamRuRVNJgqRS0NoUYQTT5\r\npO0Bx1vf8LDYE/CM3mBSQXEiLgxzIq40ucks9eDQCswY+yjKHjUNDMe62nI/\r\nGQNASkitokTkHudWgKoGjMpeM/TqG58nKcH6/UagLcJ0Xy7oKPez2x2ThNcl\r\nNkbyR3rC6dKRNz1fkU9q9IyeKOuG/z6dxyVJKmzW1Fl8DX0fFzOMIoOEkf0I\r\nA9bfqmuydCPtzACa3v2GC8/P1SXPZBSUraISdFRXjNvyZgHqnvti+ETiI7XN\r\nPftF4yQ6Y885bIU3xSUynlcqy0FxQzLFigtd+ubx7td6YZqDE4PPbd7fHjPG\r\nrblVO5jeYP3QcgcodexbdSz8agCATE+LRN/nAGwKEaW37dKgKLL/4dQ+DFAT\r\n3DENram9Naeqa23DbboQqH99KJJCvGfwWJvIgYnSXxFZTcER/jwGnxC5ZGEh\r\nVCHOEa1zKono51dVQwO3n+w9VjT5f7tJDNI=\r\n=TBw3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2209072154.0_1662625600590_0.8546031075423981"},"_hasShrinkwrap":false},"1.2209131909.0":{"name":"@bentoproject/soundcloud","version":"1.2209131909.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209131909.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"b912a3976adc47e6a81ae645cb98e51d1e778150","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2209131909.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-h4K0EZeUbGEU1U0mYJLKPuZHswVIa8Que8y+760p9o9TefQ9jN3CB+glyGtPp54IBz2KfFPioQzpMgC7a4dLQA==","shasum":"f5e48fa4df8457d24fad4fac184da410bf2f17ed","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2209131909.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8LKX9A9nQiGOodu9VYsYCK9BvSRS7RR6EqEzvRDLb6AiBIxRu4yuCttUs+M+zjddV0jHIpmHRIGri8bZsVcS67fA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZTNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Ng//YW6y25iFo22ItnQfim1ecd+kljBA4DWze9yeJpxNzb0+DuCu\r\nc7Sx3y1P6e8L0wu2ewi2jwOdHKI9Y6nNfQU2FXzOhHncQIcc89ZRtWFEWLER\r\nzn+TcFGs54HwoBQC37zaCMvHxhsw9gobKWMLkhQ3M70nylk/U9VK+TNhEeB9\r\nOD6rSoC3DZDMsF6X6QeGFEJGtP1CDtrEM9jYSlBnE8vvcrEE9WZ6fNqE4a1D\r\ns1YiffQw4+UzIN+so24uhMJktLMB8r0yzMIEXR6fUyi0qkWH3KmnIHNTcOa2\r\nxb2KpPEWYCrVDsCe5OpU+SMWivnDBQFR2yTaNM6ojjWVI1yDh4YlL+YTIHF+\r\nUy0oA/72C3M5f/pZL2r15Hlb39wNc4DUW626CzSbyg7Z/O6mFm5OV9tPogXW\r\nAwEqR98obCAo0SawNGnRHk3Ei1lC391cyynruZgk0UsOt+VZDWrBMEgKMu9P\r\n1uH4/CDuEQURF77la1RXFcOQqJ1L7UgNKGv9zdtubYe7D65Puc5mNeylDgcE\r\nvENqLyDkiT4LStZmcpsaJeVsozOR/yMhEEmhQ+2L+M4HfZ2USj5FGRj2xsWg\r\nt892K61tgBwXApe3MiNAToVFx37RnDqHA7GJlKH7m/2tGvG+6yjWfEK1wLYC\r\nER9t44NIfpXpDp43yCPmW0sen3ZuBSiLlTA=\r\n=Dg9F\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2209131909.0_1663145165040_0.2757367952979546"},"_hasShrinkwrap":false},"1.2208242209.1":{"name":"@bentoproject/soundcloud","version":"1.2208242209.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2208242209.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-2oGTnJ92wynA+MRoNs9gOETPZXSuZ+a1ArF3yraHi6aJlWzuSc6zVeCo3ojJ/fl2rxed8ErxmUTd5zhn5vmqtg==","shasum":"121e5a3889e5e4b28f7579e68dc5922bb1a8298a","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2208242209.1.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmI1MW/o6RhuLBfR4Q8Fsf86/w76d6gU9KHkj2j1MJNAiACgUSIqs39+gSWWP2Vx37MYeK6O9xKe9la5vYQlmaj1A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjI1ZmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMig//SavJ/70/oiVFHtzkxiK42o5EbTgQ2tOum5VvUso6sYR3GCJs\r\n22sjuH8FGCMsDQTOBpXWXvKZ+TKWaxqAsRSwvOMhbaQwbMPrqAEh+ZY5oQ1b\r\nrM243fO96gEH7JGIXOmGjz4STdeE8DUKjk+9L7R1R/QnOdLqwOXFaF534gEz\r\n64Jl/bomLlEwkyAk6IpO5Dm3ezBPm6fjoebOPeed+lR//5sNOsoVOkxuVG7J\r\nTx9kWU6W8y2gsbgPVkOIjSBimhBbIMhorjCjNnDa5sdMo2h4YKi7MqfK+dTI\r\n53LDXzyWgUqy15HbPonsJ/sEyVn7L+qFU4w/GhMi6h7lTLNoSB/5XEy07zyZ\r\n5tTjaEM8KrTupP5dySeumWeXDmrWp9Owi3eIK6p12SnXeXVMZC1ZYFB2wNuW\r\n0ZqU9M3KOeheIY2vdvl3WlChVhXqO1UjSNZItuU//3x25wAx7TGmUJegvWi3\r\nhlTsXfql4gOYwcTxMMlbzIQUyjcIW3bGRjFhWSUrIzDn4DF2VqqMDCdd5typ\r\n+4wbXakge28MNY8rgjEED4l5WnPv+8AZMdcJN3EYqMLL/kEZwaqmDlBstlyE\r\nZXKu2a3XPYJNWxqKHjepH4ENP0stlVXABtW/esWfyi7F+qrPkaU9yHuWkOz9\r\npnPZPiHLzBCOS5M7x+Fpa4P6qzaAXIk20zw=\r\n=0nMY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2208242209.1_1663260262606_0.40741164227418714"},"_hasShrinkwrap":false},"1.2209142312.0":{"name":"@bentoproject/soundcloud","version":"1.2209142312.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2209142312.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-A4vKPUSpTt3BElqu12h/TETilGCqRgOreqSYUerY8rgKNKBRKo1Zut6DOWLCjCPBXNT5dh2Ye081MUpNSiSHng==","shasum":"4cad25a9861ebc1247393455361df71ee7faf6fa","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2209142312.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEkDLvx5KhuBkkU+qtGGdoR4wGKGSTNr5NF9eQgOf5BwIhAOLf0VkQxG1ObdDpzD7RmC04sJKVu1BIgxgJl9orEw3m"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKjobACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCug//dSj35oY5YgN/KiL8njTvP9ag+vKBzHKuEfaljIBKewgDdlt8\r\n1tYaJjgMLaSPeeFlNeUM0pY6lIBuIHesnmYkMYhSp06BtfHR9rn7Z7O1Lyc3\r\noByX5hZU7y0Nikh0x507g9zkffJKps98MQnyV0zSwroLK1M/itutDoWr4O2I\r\nfdrDRPDtB5SdI8nrs0wnk618VVl7s4ZMDrFm3ybxeNtDLvhzJwf07FfAqnH+\r\n18ono9jQjbFbcyYb1z36adgcias6clSTjaOYA5hShkvcLC3kEZGZr/dP1TVT\r\nuCjteagFikHXO8wbYDbIbZZraP4HnTwXWPBiJXJK1oBTuI5ZELktobuddHy1\r\nuPMElzUjKx/aO64weLjwUsr/CYVhfa/I83GHioYAtE8aXHyynsg6hrq4oev4\r\nBrVT3lur9s5znvvD+g1AQb7RxNy371jqeIMYCNwrqWInrdDeKz/mMRB0mYJG\r\nMf/QpqlfRzqHkFAxK7yeRgdvd8hqPmoCTl/AQNFLpNZSX+8bPC5n2Sw2T2nB\r\nSWqBUy2dgrQq3SiWfSBQSNVLU0xJx8zI7YnVJohCn34gRFkzlf4lCMSnL8sB\r\n/+wOuG5XxrN4mN+UzmeJzSj73OAX4Gz7pgbliUlSTptOAdJsdszQU/iAAfDn\r\nQpiMs5c0+R8lOLI9GxhoV/OvnxksoL7BblA=\r\n=37E/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2209142312.0_1663711771415_0.8617867671183121"},"_hasShrinkwrap":false},"1.2210010655.0":{"name":"@bentoproject/soundcloud","version":"1.2210010655.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2210010655.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-hOW7lqYzePiQVXjOAn+BLDQQWRNRDPit3MFVcSnlAeMpqm46PGR58LgpguC/09j3JZO+urXx+6NIec8KNrVOsw==","shasum":"7a7809d1612bf3aabe35cc43fd5683811492cde9","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210010655.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyTez5ZyXqSN9wghGvu5hpS/tjgLgYJzUkZgmTSA+tYAIgV6MYTHJ86FqtqsWIio61ZsPocSyyT8FLlMjMsqM3ZBo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGRmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdDw//V1b5FKPGAnGjgKiEg0xARFRp+o+oOBlqINqlmOgS6lo35EKZ\r\nG+rPlz16w9zVjEQhT08EQQP+kR4YCodd2gIY9aXVevHrK8SlMccyxlpUM/dN\r\nIRZfZ3rOHCCqaFggBEh1+MSPN5gtbLqzk7ffxkzsmzzBW9Xu3p0ISg49G/aV\r\nEeqcGVFLNAgNecGDzRca+8QkRubXSrA7UGSt4jHOvj4NJyzyv6HH2R7UY4am\r\nBbknqn78PFqTmAY/XvEE6T9R6rUv+536Kimp82dmsBZxZqjRRLlgaaZEzXIO\r\ne7zCDKLD0I1DxRSpy9zclZwjLTDjCwJBcaDrSH0OVvfKpUeTdYeIZOVAscmI\r\nL8M64UVu3yRpcLyq/gpRA+LBHE45agSd+Frjdysw24i6dM31DaO9fP2Q5UN1\r\no5Ol1g70lQkoUn+uTDrLNsibg3h2tVQhQzdZpN9V2dqrVqSeXHpj2Sd0Vrfd\r\nYm/4Ya+EAVlsHXolG5JSBfyq9xqUc2dov+OFiiZh5sVPWWsdAnFVnGfrchlA\r\nNDJUQfuJFfkzr6Var+ZXANduZ9CCelxqSVB1XyaBF+ktmEqvY3cUX1kvxK8s\r\nRCzW4lTk8LUAKU21bpDtJRlvBp0WVZG99ues85D2eFQRzgk299x7IwOfahIw\r\n2H0/b+okZhZvUh8hwD51n0NyqhFJgaB3wf0=\r\n=7zA9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210010655.0_1664902246458_0.9578281325682181"},"_hasShrinkwrap":false},"1.2210041838.0":{"name":"@bentoproject/soundcloud","version":"1.2210041838.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210041838.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"e79aecc1c4639b06a7f2843d961bb14f293a53ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2210041838.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-fUdTmadUerS5ZZW5+SR6uQYwDEtgok8/bAKMS7ICzS8bYBWgT5xsRnOMsXdWZd5f0t/tNeRo2iutaJjs9JjMgQ==","shasum":"e690d94d7e94d4ee7c5674bdc1b4040234de3a56","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210041838.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbqx/fybfhoKWxiHqF9Yvsb+j9B9J0zIyM2DwDOJ56AAiA9LEXO1dvSynyvvevsORdHxDgdIfJWs/h88qBN5PAMqA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPUDtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWig/+J0eFzQnbCP1RRdQH3jeAaY4wnWFTG69u3BiSc0FY6VBQYwB/\r\nYFEKmOAkfghEHXfdrXtTiMxMGXAyaZ/Luy94d1/AGtvHn6eOWjIemZbpAwtZ\r\ntmG/yQFMi2Gr58EhBgYY0Tat0RyjoCQ95NGgYLQd8mFItVd+v897WwEXHhno\r\n+uiEvs9NwIW1k51Ash6/3K9Mv2le06y9lblykhiqYuQwYeZVgiQLYdXVjb3Y\r\nyPYuzxM5EE/XUjtrz5VvCxXo8xzODhniBPyvP34/VxHaVXHyG3QQp7+L322u\r\nsunpErV6cq1L3oAm3HzG4vzW/pLs4lZkIhjV4u8hJ6rUGeOMPu8Ao6VghpsV\r\np94igphjfoYzmg547loQuSKq+fxZSM7bLv2cMZWY/cv9kYn44lBvmWFbIMSW\r\nH3R+p/GHdwpKi06WfZZ6NhwgWCkUj7palFIdaNXo60VJKqbRtW1mFkad3Ufj\r\n4SeTzJyAX+oDuD72EGrkg2vE6I4E/WlrN+Z82TW+28OhEyXM3q13actSJCRe\r\nQAQifw1YczjCedmqX3BqLm567of1fbXEB4lseuEi41vid/VGP3Pp8Si7vzCP\r\nk0VPw8uYtq4TQ7GRCzB+21hPV21yKOWTgAcXqPUUE/qDAwtBYCEWLytvxyWJ\r\nag28dEhldcOqjIyBDaAF7qb9bossnpAx+Jg=\r\n=labu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210041838.0_1664958701145_0.46312964158525083"},"_hasShrinkwrap":false},"1.2210052034.0":{"name":"@bentoproject/soundcloud","version":"1.2210052034.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210052034.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"8a0a0067f57f89d0566ee1db3d4bfeea072d3c56","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2210052034.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-RLZUph7Qg/d1YBaOu4+htkwK1QQ8pQGXF6owD+pFNfS7iZhtFY0nOCWKee6HGeCBkjsoD7jQSsRlA/wZVuX9wg==","shasum":"9f6c58a3f8db5ff95a89b4cd5c13bba56a08577f","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210052034.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKgaOHn9ZYNG2n8QjU923L+grfrDZ6AYXYhkoIZtgESAIhAMgqEjRRenUVIkVyVIJcDuSOfLkz8cPCZ0i5OHGKcsus"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPpFnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2WA//cUNZEBNa0AmrRT3xJRx/PklZuhTmbcoftCK3TIHC75/1xrB2\r\nKvI60qtpeqWyGFP/sl3NEhC5/0sSdYG6gQWHgv2HqwxX9ujT22HH2rrMKYaN\r\n58VYJ2SW0NfG0wNH2U4xwYQe3n9iOXV6cbbrczK+0vVW1/E2zJAUfD24FaNH\r\n/VB2h3ahjF9KbRri+IpdudzHPnJQFDB5tbQpKjcS62vMTJ1eNvOBztjkuuqW\r\nSx2Zm1FbvVVF6XHa2JUrPbVaNrCSRfm1GoYcPzSSnR633GqyHs3O2Z6F6RQW\r\nyKVrUo9lkDxM1R5HCr2Z9v+E93okD47RNXUafp1Vb2fYGU0qK392cp0n32ss\r\njk0U5mLeRq+d/GvvHJ0J/3D4lZSOfrMEJWfwzo2fAmsSuMIL35/63jEwOdYB\r\nOw393H3AY6RA6m4Opac+PJcQLiwi7HS2zhOMZsx/DSsNv5n3ExzUWSXl6lj4\r\n/LqYslJ3OmhtyzNuCNmb3VC8QxCq+vr6lHr72Fzquw0IaVdbBRuvSt7s5l6Q\r\n3Ii/m83rwh0jAhcVyxn1psIBDRKTXjphzJEv1RRMhhmBKflQMDFVC895uO/4\r\n4ngzONod7qae9/pkADZ8BSoZQOEumJTid0qTcxXIKIYjsF4Gvky8do4vmq5A\r\n10wDbVo8u2RNCqtnTkU0bpOhednAgnFiJNw=\r\n=D2Qx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210052034.0_1665044839672_0.6511530640141299"},"_hasShrinkwrap":false},"1.2210071758.0":{"name":"@bentoproject/soundcloud","version":"1.2210071758.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210071758.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"7c969ff5fd5406304f6a9867fa0db59b74e94524","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2210071758.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-LRj7N4obELDjVfgDl1uZUUwp8Sb+lCDxFd8w/Yj2tleit3DYzewH5flO1XH5pLZlrWDiQAguYQSCDiKMD7Z+uQ==","shasum":"1c9e1bbc35767d3e81b61c142380b66b19df55a0","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210071758.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAfCEVVcRfcKh67JQ00YUtQ/TD3VSwyOuzLI0MgnIo+RAiAy64n0MlroLgEkXqdJS6gcyYuK924jOEid9fD1TsFAuw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQTRLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvJA/+L66/VuirT0B0mNAUIlxGgteNoOsZq3kYti43hI5QHo4I3+Ow\r\nbqfQYR+A0peTnvJhomwS0Ufo/LeGeGage1A+4JLd8IVqjYYMzVZl9gyNR14l\r\nH5nhsHk+vw8aGATg+X4I5VkpaF6FOYInHn1Oe4cJ/A1TC2yrh1Q9/Xm2iqmk\r\nLaeyDUn8Gg7j2F/Ys4VByIYGpQ3Y6h0tMxmiH/hE2hxHp2y1j2reIRoHubFh\r\nhDhFLzPLojMr4IThEo09UQ3aZ/KU6cLWqTKgZiuBVsuaWzzsHm8b6PTY44WP\r\nAZvBOjfLLD6t1BvEtbzjmmso6ttexqRUWzdeZhnAG3zc/n4FAqRjUNbyPtac\r\nT7TcVGMgxahynuPwdo/FBbLs8VVTSRVp4lBH9MoR5siJQX6Abwl+AWhG5NkO\r\nPjx8zF8aKkS/2YgF2QYjJutCxIHBtaHk8Dl6uLfcNKUPn3GreOV4/wd3ujbj\r\nECKKXJ0Jw9jJsx8OaByc6mpAFLGdVkOeWIw+MJEOlUHUmsvqr+MdpueScDgT\r\nJeeMkQu92DBCzbMUulroDabg+cpdoHhWOp567zkVKfIMOGX+dy9dPDOMy1u2\r\noJ9zXC0HAjSTCSOXiiKlQoZQ15IZ3kHahS235YalMzNvxBBEgaDDEK/BEtUr\r\n74XaJZielacB5t7QjEJJaGW2Y9G1++mhMcU=\r\n=ikpF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210071758.0_1665217611056_0.18029038344497805"},"_hasShrinkwrap":false},"1.2210112333.0":{"name":"@bentoproject/soundcloud","version":"1.2210112333.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210112333.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"1d82bae06844d5413aeb632cfb2f3ef443548ad0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2210112333.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-ZyccFgyQXOzXnvT5q9rRvAIMMccZvpw5dE9qOebJ2nE0yne/uRmKjADRTA2pLJ/h3A6I/hSorNtKXBCqaNeWnQ==","shasum":"8665064053d11ba8b83bad931ab27945dffd366e","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210112333.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTxX2o0vnv9YRYrW0mKZp68uGn3jWhQCDhZo4FaQJ+BAIgdOmq0wMyZTQfLxs9JlQ0QoxdopRMVaH95OHtmSYPNzI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRnogACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3UQ//VNyK5QdbxGFCvIcFAzsKSwmoe200H4ZwaxNJKMTKWK4g231e\r\nKk8ZwvES3efj/9ZKhFLVOE55FcpyExDmLa0YzxC6L8RjRIv8+tpsKbCyqEhE\r\nGOOTYrX+/8ldagHP07eralOCjtPWb9VdC9ESoCHBkUkUOYoRfg0rwy3RfjVs\r\nq9/OZNS15YpMP5h+s80YayU72v7sikfs10CnUw0CAl7vlTDZiyEk82W6Jzbc\r\nR3tbLLm+CKUfeRKtPGHAquckL0V2I7kbYQXyF5Rk98y8eSTTM0hA89pbn81S\r\n4QYBGBxxKZexgKYjnHQpTVbEgQ2gtiWlyAiKVu83N8mqIT/wRePd5aijyY1X\r\nyOlhQN8wNQ0UIs+8tF0e/2iipSogewKDmhax4KErTVw4Wpc0HozRb7M3NrQ7\r\nSGi1UNK4U7FJdZdgHjISbtrcPNmpBCNY+CZQLZVE9E72rZc2IcWOz8MrPz6x\r\nTDeeGnDQYhBhrHf70/YKe/jtSU18rkqO7rwdReXPrPbVWPc0UA3+jKhVES1N\r\nBI9uqHiTK0/TvBCNwyDwZof8hjbyI5NSjwBhIfXpJtcH0nQmibMVSGl9uYob\r\nMSlkMJMl1Yv+/bim6A8qinguNXQ4UFEoYWyrXg7+whrPEVv7j9lbZF4nwuoc\r\nPl9ojvXZdoyxgOcndwuF3EisvKeiQucMJn0=\r\n=HMWK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210112333.0_1665563168053_0.22370314396491287"},"_hasShrinkwrap":false},"1.2210142102.0":{"name":"@bentoproject/soundcloud","version":"1.2210142102.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210142102.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"4cbbe2b23e7b0c5b0c005c94a574ea48a45f7693","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2210142102.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-4W+1PwtlLPcQG0q2+f3kKvXVQSkY0lFoAkb24svcXG2RShnoyNxU3k+8zJQkO0NizZiSxwAhdJthEIZ2dCRJMw==","shasum":"5bbee8e068ba29aa1fee382876ba99daecf752ba","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210142102.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsT0Y2KxA+WGiTPq6MD9wstrRTJT+aFOIcQqvw2LmwQAiAKzFmAgRhK0dRDFdUi9b1+T4Jt3pcohpB0YN6xOLifZg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSm6NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMGQ//RRH7VZrI6owGbbkeAUaFk6Zn03Pq/6/RizUKsdYuVZk/e6Wu\r\nUGCZopJCCygHZ5Ff6yFN1o/HZxpBnLu39gWcF4o2eIoJV2t3OG6Ewx04OSK9\r\n7ur4XbNUTKQbbQfrDRNunDcud7EPrPwheINKjhQlOqaNmToWm9K5aL7BK8o9\r\n69VrKCxprKh2/yCREFXxYNcodVcqswzUNMX6rGKru+pLqHC04Z9Cod6KzXRh\r\nGwYEgeP3S0rnTwtbzYmk9ApMWyz8413k0Spa0zgHx0NZphjz4s2uP5w+ziar\r\nTz91Bc2clpvtUkujfEMmoR/Akg826YDg9At4FG9e9RweXivrp/7SIPlZAOID\r\nxkOoX+IinedaDcTmg09cjYbAYNOM0ty1/U6KbSCt0h9/qUAw/xDXp2bkEUEI\r\nN59SbTmHtGSxgoq90K2GnbQpxIU5bVMSagS+GlDkC3hBbEG6BYOlaHIV/O9r\r\nEBdx0O8f+Rr9XJZmNmNW9Ud/m6w/VqqQLqYLu/Wli3cS2Os8JEXyoYUh/Bwt\r\nJxkxfcbBP0InyddhHUSp/nx+nLthwNHNW3HKba2YqSWPfGg18hJkqog1WSA3\r\ngK8oYc6gOqOdmwmaGZVqYvGSTUdNTTxHe1MMCrXz368IJP1pxRqbcuuCQ8Qw\r\n60Fk22DFKcQS9VybPLOprsCY1uPQLbDPfVk=\r\n=1W6z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210142102.0_1665822349643_0.14413145693669516"},"_hasShrinkwrap":false},"1.2210172057.0":{"name":"@bentoproject/soundcloud","version":"1.2210172057.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2210172057.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-ojHor8R0zj01896PY2rFX2tZcP/I4ho3NzpeaokdCaWK7WCN7sEM2b0+/QvCA7LAyLYdPQlhgxFS7mf32H/gig==","shasum":"931fdcbf99f1f59e7140877fc47197785c14cdc6","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210172057.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1qrbYhPnWaKD7TWslLqEW8dTdJ3HD95C5qcSDtT1aSAiAlx9gRYx7x7+EPQRKqDU9nbiYGv8uRNdgT9lhzhxn6hw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmPRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpllg//XgldOZbN0h2PS6HKhgqz0HNGMkepLCJSFueLqi8qbvBEgX//\r\nnCul+OWloSK8omZRcqidL/CaNz+at2TRgpKeuFQW4YIzS1W03X2ln+SyOJwz\r\nIS9siec7q449X+Jly45s1sUrtqtTv0IUIYbovB2U8iTHMxOvDHTwI0MJEepd\r\njEFJI2A4MZ05wiCLz5VQinL+A75LzKBvL5G2P7x9+cbXtLl4m5KsVghzVVFG\r\nC5TTiSnf0v2yMwdT8UeZRzJ3yzNycUviQtN7OneweGrSfOUc9cbhE3Bdhm23\r\n+6T0OW4dQ2BcEZoVJ0vUMA3P28uAuic3KArMalnJDYUZk0iaxMzC+k3+VkFQ\r\nwk/WjRBycoAFl8Qa6ya7oft1nTxUSF2nayMiiP2inJKiP8AVQ8TL4eEZpvqw\r\nO0hJI4AYNpFgPnTle4eRDDyMO7pY9aZ48YXGLh3jRj3UfV+vWre12gIk40r9\r\njs+MBeQ8OXElILwY8GIEhaWN5gCfBinWpfOzb2aQCd/EelTA0Hqx0Uf3hq6e\r\nUqjGdUpJ/KFL1TWwyPRKLIsoy+2bJgZSFpHhLDgFcRRyouTSeobV56bM1zdE\r\nr865oxF38bwwpluY9I0HAeuXAOWHjy6C6xbpfNb8JqFuABg/dgl5Fg9P+ixK\r\nTZcNL39b83ZKOqKPrbOHlBlUOJ+GKTkMeFw=\r\n=6tQ6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210172057.0_1666081745097_0.2096675780221271"},"_hasShrinkwrap":false},"1.2210191347.0":{"name":"@bentoproject/soundcloud","version":"1.2210191347.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210191347.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"b2888af97582abcfae901ed340328b22e9caf2fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2210191347.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-tGeEBy/X8LE0KJZos8/I5M97/1oaBjE8frtgGLEh1yW3Cy7qCgvTJ5pKBHOqUJlMlzUf1axZUqr5Egcsz8RtmA==","shasum":"783bc7de945ea9b40c64238d226716402404db5f","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210191347.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9jM9qUGi4ojYyfCGV7pvI6KMCNs7IfHqST448T0sxVgIgUaQsPhm001pEg4LcNX80C7pS0P1TDpg/zAAOzM1Dr5Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQZDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqRw/7Bdu865P7Mktkv7B10Bi2UOJhggSkvGylQr2uLB8lWiEBgX63\r\ncDX0p8xDFG99vWBMHDYT2g4u1R4vmJkG16gK/5JfUes7K4eX8Vib9O10QH+b\r\nlZiZNC+bKr3863hZuvdBpfLtvcJRsrRqfTmeyQcBRJt/JszmtDuAmt6YIuCI\r\nz3QKPtbEAJ6hjAQZZZbFPpobPwB3NymwEaBpMICaxl40Q96TigiMibvYm3Re\r\nfamV5xwOXq3Cci4rbZKU7TI78epfZtecYwTVg7l4NrI5VuW8EwQxVOPSssao\r\n35S9pq4P1ZzpYjXkiDJ+hC3uACASLKPWNQG3OlU6JMLCug4W3Lr01FQOtIk8\r\nbUhQhRaPvYNYJYWm5EKTcDiTyEMI6ouZGbqBItRO7TIXz92v/qOLzyBOHYvt\r\nrpsQEhEypO0BhDDflgptD9mXlBdT/c1hUxT8XLW3uWk4RZe6yETmhLA8ck9F\r\n3lFEvzP4385U1R/AgWXpBwfSICwTBHUp4ufdM9e3l+LDwLu1GNsgC6V6NR2I\r\nzmoa604uhOyvkQ59vxqzulnwF2oPds5ziCrDeann4IGHF2pMSc0NW9TLHNvP\r\nXcxl+jWNWnynQRv9lxalxRuxOcZSK47KhQse9MMIutlS3oVpoPWZA9rHcvyt\r\nItlmPQI9GvYXPnuSqTgx1Ra54ZDc7Y8zAeM=\r\n=m/ma\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210191347.0_1666254402995_0.9590771760739594"},"_hasShrinkwrap":false},"1.2210211855.0":{"name":"@bentoproject/soundcloud","version":"1.2210211855.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2210211855.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-+VITTGmQnn1KlD+LPhvoPX3jd3/4IfjqiezgKwR9kIqGcwEpi+gXNCz2UabGO7JD05oi3T14V/FX19pF4/cKag==","shasum":"ee7c01f912fafa933b999a742c6668c0818d19db","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210211855.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEq4VamoLWG5FiuShVTv5H2VNLOe2kdYtYU/tr8iwd+AiBJNaP/IGie1Kc1p2e2eAMxmJS5lmIeeC1dk941/KQTbQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjU6jXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovcxAAoTeNfnCwZRfUClO8bUQUORZOVzrjBDkLo56sbZFN8XANpxdl\r\nkWqi4OFreHyw76/mslcIzOj19MyN4Kjz4Oj+zjGIZAVEBX7y/+9Aa1MCfxmk\r\n0xY28RidRf2vwUx6kLG758L4G2wUAT56aFsgOtZoUJmLc2SFMSoWX4tYrbJK\r\nFiN90riMn/NMTOny+oQ+N6wD9iJyzthjcVI7QsSMzze+vY4kLlvJ9kNafQRH\r\nBLS6JXk2yVjEkr+0nwWDunwlMeREgsKG4JSCTKRFiM15c+uo+5SeWrT2dYuh\r\nIWFJi++a+OKEN2j+SDAi60abTKaGczZpmUySxmMRE1zLy7GrR2OQx1QyYtAk\r\nKybsDhoDwqxoqAN0mZ6FFEN+3HAvyxhbo+bqMictJbUtXbPBakbhkHSHVfA2\r\n0vvkTUHw+IXDy665fgPOieBEq6AKuhfC+ve8pi4YbMJ903nGd1M8khHrw1J/\r\nqNVY4Qjdtb8Gt2aw0JIRoI75mPCWG0CUpwnJxQw14CZ/6eGTE/zZHYztDOt3\r\n/oAGzQKv/RUspEamG4j5oF52KuKgcIi10V65qChf8qo31A+SsnecgtHkzOVY\r\nmoQHjvnkG1nhmykhFrXZvXNPB/rUyW/vnRMyoSeJ5eoy1kB1JlVQkG6Xt0aY\r\noEG9Ln+NOuIUP1/qUfsYKo2pCvuXQqpDmsI=\r\n=sA8s\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210211855.0_1666427095312_0.3916100603667423"},"_hasShrinkwrap":false},"1.2210251605.0":{"name":"@bentoproject/soundcloud","version":"1.2210251605.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210251605.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"a1f66509b5a6104dc33409f285dac1ab133942f6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2210251605.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-3H/s+kE5ghGnNgnNVdgmG2ydYWHMR2gEysLlkOGtlhiQDKHn84J7dzsAVbdbuGVHcACqqqOdoZ5Non28W9Uz8w==","shasum":"32cc50498764bec53d4caa533957bf04ad99696b","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210251605.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDscb3w2FtJlgEfDBzTtHrj79uduWVkYqxS0rRTAQBYjgIhAJfBIFUzgqXCKtwV5hmusbDY+U1CTyqk33mrdyO4Wrc5"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWO/pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogwA/7B7mHhsByDEA8YCNPA+zxWOCb4oYmlJ+iylVa4cfedFhQPb/8\r\n5UXdGVA5HmGvS6Nh+W5b0qpZjo6pCK8xBkHTK9aWO8b+QjR1LWyUCfl5G3Gs\r\nX9y76K7CVAqOswnRI4tRSEkPFv5bQjpX2qAzEKdoLAtYhF/kfoD7r+rTNBNs\r\nAQaJ4bPmKUOUoNKmCk4SaTN1CBkUdaMpAc8OUCFc6cZA064UHO8IU4pDfgSR\r\nrbB5MlhJNzjczFMynhHIfmNKIqut+d7hUginbig5Z3CGJrSj2vo2tH1JNAPR\r\nqq+2DRkDDsPVCyg4atNoZ/2QHLP142GlfGrv5RZb48LVePbek6uoMSsnPHG4\r\nDoCcIXmPtiMpcakwIecVs06RRtkyr6626kn/YV8rvaU7hWN2Hj/e02XEv8sZ\r\n9nAbshXXvgfdqSjB2vZq1/WWdvesX5qkr4e5jRTuBQGh2urQdbFCXJYGxhpk\r\nRcNDYux45Vp1YrW/ZEM+VDFVEyhGgkfMYIELaxYfIWzkQ2O93UtXJZBWEhnS\r\nNiXX7WuCNNrpLLpLJJVHpH91UHUALWf14QTXHqBCJsIZXMBdc/OqRMbOXDQ2\r\noSKOfUOOZS7qDt5SF4lBWflS8D6i72z+TjaGk/s9NJBPt2tZZlZhsPtvE4sS\r\ndEmEKNE390NusFRgYwSH4ftmpdNAyyVeebA=\r\n=TK+G\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210251605.0_1666772969202_0.5666370987763665"},"_hasShrinkwrap":false},"1.2210272257.0":{"name":"@bentoproject/soundcloud","version":"1.2210272257.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2210272257.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-sVDWijRjRX58kmVG5ht7Jti1LyvZJROJgCUcnMPlEB0FZ7COOyfstAUCKj53GRKZj5cQC8Hw4WFkbqpiAZMINQ==","shasum":"22c64777caeec6d7e97512379cb676e3efb9d4c1","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2210272257.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo+Ab3fRC62x8cDVS9OUIhbQrRrUxU5LRnXEyaLPCspwIgRI7KHMfX/z3gXk4XCC2Xqqz3kpZTZ0tr85XnqY6QLV0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW5KTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvthAAhFEexPhzYchL2z6F4IJ4Q/2Kx1jN8LFz5084eRAdx/PbwIfX\r\nLEe86UNTIBYPIZbfBGPI1c8UDfnTfTZj5G6aAD9t3Rf5EAknYTHYr7PgcP0o\r\nD700qREEp+zt3YJAPdDfrpOyT5k3Ihu4xNkI4udoOE0Mnj8Eoors/lkbDVIE\r\nfvk283pyUHdRlDsW2PO6HAxkS05PMdDLHxolCu5OrPnk5pQZ1EZIupi02gT1\r\nl/zkHEQVX2c64kocS5FK/Yux6ZZQeZmuJm9zJkGB99bRK97pBPDcQugEjCaV\r\n5keUCBfzWOYItgak/2Nerrfubw1uHTXI6GnBkQoVbdSgRWLyRToe029n6ftk\r\naqSUIQaFgU8PFA7p+Af5FrR15CMXgu9i88bYNJSUYUV7LMdMK3x4a+l1JwCJ\r\n/ahqxDL/BzskLKtsxtQ8PB6jPKUvSm3t9mZNcSTxzUp5M4GTj/WUHXgO6Zbt\r\n1gxCTJSD8+jHP8x5Dkni03a6qz3n6k6ad9leVxEBYFJ5OQGonrqViAGzQv43\r\nxPfT98TzJI2Tcjbqh/t61Z5FFgoP84VW0VvGQRA0xo8VV4Zm68ClYrO2oiHJ\r\ngoUDyHa4a3SUYZx5GG928Q6Ys5FyxBWntREcZY/wlJYAXFXIgC2SBCxEgSg5\r\n4I3MO7ib62PNmLL6J22YqSSeNdCCFTqk1dg=\r\n=bgPL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2210272257.0_1666945683097_0.17760408630050017"},"_hasShrinkwrap":false},"1.2211042305.0":{"name":"@bentoproject/soundcloud","version":"1.2211042305.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2211042305.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-iOWXOmAsCF2FsikWCK4KTwCTGIlkbgTYfmspZYreIObJAC726d9mwy4VxVuU270p+aU3gyHIjN5KXjGjHCILHA==","shasum":"2ee2feda9a0d4890f96bfbe48235e370cabaa1eb","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2211042305.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDh/fgEgbZpif6SKHNn9erKComfud2F0oOdxsApqxDYtAiA1e0piZ6AKV0OX4it2V/r8E/5nWPjNgNbs5llXxgD7IA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZh4MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvLg//UFGpv814w0jeZtqq9EAPI51+q7xA+IeP5RUcbL9nUo6LOiKp\r\nj175ad5XEYWFBSNxlgw9iAYAcfj4O05Lu6QDz9niN4NrX+vcE9IPUjjP8ePt\r\nVjcFBF43t8FboAnZXQQ1tqTuXNo8WJpH1IEnQSKXZn8vJIn9sFjtAsk8ONVZ\r\nPD3I5T/voLLmo4vIM+EMXsRNTZ8Y98U2fPSqvethBdQzaY6pNBDhUvoEV9mW\r\nv7cDBfo/MjT86VhBiKmHKjublbrDj/6SS9dogRDeVQ5YiBiAb1UeywLUF2ZD\r\nMQskQ6h3cELfXYbIkizMHiuFP2hkelnwKxbhwhsuVNc20wL5DiQRmo9wiFwQ\r\n8ZtsLwBHPVwdrRVheL0rIIusV8U5P+HiFAzC9pe9XbjZFAEeHyqL1Qc2yUVa\r\nRwzi70Pta/BqZMJM8k/+ZWRMJ/a0qzdjhcnOVmUxd67M5Aqwo5uP20IEWE4+\r\n7aayzbRbn1iVGiKu6/3NT8lMF5MJlziIxkaF8D3M9RwRDM1D9RXNG4+sX4B/\r\nLXBZFltFELLp/fNIK2b80LJGNE3hsRdFsmJMeBRlFK/rygOuxPdfdG67oHed\r\nPy4YAfhXeGqO6+bulSEAnuIQ150ffiY1vDJyFlqhN7Zo52+sMFl9DM8apQM2\r\nz7zuS7iB845i+wrKBLQB+zPldOspZE3D8xU=\r\n=eXin\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2211042305.0_1667636748579_0.4726850648943217"},"_hasShrinkwrap":false},"1.2211060024.0":{"name":"@bentoproject/soundcloud","version":"1.2211060024.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211060024.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"f6dce0a3fbdbc90de3eb1773dbfc31ff1e476460","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2211060024.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-y2XqZfoEzt3DLHmujbJW+IWe5Z/XmbRMVUYD0J3X8YJh/mRp5s6i1RRzrCDyGw2IxSd5nXs+OpJmB36PhKD3YA==","shasum":"5320fa0ed5e3510b37a5b0e741b2933e4fcdf9fb","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2211060024.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa9XKC/EvJwopqeSVty2QJfs5WSvCMP73EJpOp0Jf8SAIhAJu9FkeYy30Xr7Mw3RbVsmLAAaSRR9db3xxi8qTLSS4K"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahLyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5KA/+KsggRtV8QYPiAg1YH3hIJwE5MejPxryM/3dLVVMXMDnuL9r3\r\nheKMKt6HYe9pp33Tm4no0+m78G3kMVd6obU3CRZ9fJK239HaYJM+t/KlUCWH\r\nfd3IMZdSGcXHYu0wO7kLm8e4s7FlFWz9/zuKRiMsB2L48VEOESdjfeU3+2rg\r\nsLje+A5kPe0Eg5yBjg5DnEqVdxvlVwhwmpdrMpwaj+Hne0XE6A2uu431HdBV\r\nkhXBiB+oDF+5foyWM6yN96o2PgacbMvDlyqmY/CVJ7j70p6289H3ljmPCalw\r\n51D8kgcMbS/j8lH8qdUnAHb5d9SWR30yzE8ha8xbjujucfK4zFey+jGkBI2u\r\ns76N/tKwhWdhVl0ZKD+WYOmu83uN8cHA7lTlEO1V0/6dK7ryJch6n4rSIkgV\r\n0diT2H8QInU9ewJ/umc37+824BKXBa/ajHN7FbDKmNqpdtv98SKWmnCDeOMz\r\nJ34BwQZojiX20tYut13/KPEkNXpDS5UQB0iY1kzM0Ai+HVm0BRQrZS1TjYzj\r\ns6iLK7L8inhoBQeR2hfu/qzM03ej1X2fjt5PoP5srJTbVADVZNP5PcyFvRyt\r\nVJHPX45rph5S354FQUmaHb8JcWUEY13yLSs5Iz+hIE49tKlHjq1DIcT6H+sU\r\nWspzhPv5BOAcP5+YwckS9hShLmNYmrqP3FY=\r\n=HWXx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2211060024.0_1667896050299_0.5142435422979315"},"_hasShrinkwrap":false},"1.2211111611.0":{"name":"@bentoproject/soundcloud","version":"1.2211111611.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211111611.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"f9c1138144838b5c4612a779bf407d2b2413d105","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2211111611.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-PhNU+XAZgoMgYyBrwTNhAbvn4zvu9y4dorzNVDHLC8EJodpM5LDQ63clYC+d7w8Szchtyr2HwMJwFhAc+su56g==","shasum":"3be3aeb02ee7eb1258dba667166a64efa3815ac7","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2211111611.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwuqDVjq7cWnfL6RvAp4Oy0t7FBVOBuaAipAYL3yP3HAiACwK17KxTvU1SvgAA+1ovpdx6a8HAw7ggU2z3qJQ4xMQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjb1iIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKIA/+N2EUGMxf+YW3W5TF4TZt7K9MUld9DDLQZe2/7urlo9GNR++l\r\nTag5NQ3aScrYK05/X1jEshZ5ndkWRFUAnArANr41cqHfearNWfRvDar5RyU5\r\nSny3tfCcoyR1GlIKg78OADI1pmmyKd3WKePhV+R5i8bJJNrz4zOLjQUAEzko\r\ns9L5G3cEBLaiNdkAYFmOScMrXOoUKtVafP9yphQS3EBnj33fN9S/yZ/GYOqq\r\nJpWf62hGbyfyBfl0AxrDgmeKAkrjlrV8zJOxHbJN5qUwcsQFw2xhl6+h4EtS\r\n6SHSKxwz01qdsKJyZT2mXPkJaZ2SB1uN8NlJ1kFWI6hN7nlBrwbLsvA0GMrH\r\nvWownPg2UZOopG65mHSYJueJsSp4+Wdtke69tlmkF1OzUvgGR3K+jmI6I4g3\r\nfk7PgotAIwptN7qLqro5D8gE9XkXbEjUeqursGGvVl/D9czCdJbKX+G9ekHj\r\nB1/ZKmADgTgaszVh78qw9TA9Y39dTwRqYmcCvbZ+QoBEClKQ99aSyTme3ZnV\r\nudQ++S0FJ+DCHpDWY/hpzSeVOSG+JnbNkEhNy954vt8Zy3bfEDq+GitzSqnl\r\ngDK936CG7wgjyRJrAlB2vPYB+6df+PNJW8RU/vBQXNUTMdXYf8OJLyxLULVw\r\nOkeGq6bRqk6u0Y4GKdOMVEAd8ZmNPON1xoU=\r\n=MGD9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2211111611.0_1668241544073_0.11083415909329597"},"_hasShrinkwrap":false},"1.2211151402.0":{"name":"@bentoproject/soundcloud","version":"1.2211151402.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211151402.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"db41c24bd071b6322e0a5188c4bd74aa94cb9d5f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2211151402.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-R1BXtqYOXuZ1TsnuQmucsluRJcm8YaSc8oKckvd3/2rTQ0XWE89OavWFuwYf9dk7JUVm9z/pUSgfGhpSw3x5TQ==","shasum":"82ea277b6345d2e262823d7d56e58d3c2e2f2a48","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2211151402.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJ5EMz5hl8d3jHmnAW5HzDfAuO20h/moz31PbvHosVVAiEA+F6VtuLneKSBahKJJe98KuMcni4KfDfS8eCOupAAPvo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdTB4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp74A//fd99zSWbXTwJdrpqjbNMmellwOXhc8fotFX9OnBkEEO1rYuA\r\nBVgG286mPJwoRsUFsuAJN6wvMeYxNrJpkoS0fEqDH9suFK50pxVjK5cMbeTI\r\nfg+pNsNdSUX5AXMm7TbvkpBARre0U3B/ZVRenyEeIeY+Ve1TsraQVvmmGwyN\r\nyadnlV0BG0rhr/OlynQ8MFiTlTEU0Cm4VtTLERyjeho/a4A9+Gf5Nmx2BaQ5\r\nMOMHe93FYNGiOIiYX7AzjaRagKbLNu80o1VKyf/fJJeBOtjVyqaamWTk0hhb\r\nH8dmnQEx1aAeoG2ruxBjPyXfNfu5DYlzmuzmSvVbIKWwLXWFD2Cll3H0Kx1p\r\nrjwNUJmrINTQNSkeZAL4bZiRdr5XDSpTRRD9WBxBMlti689LNplL/D9q4Nh0\r\n+Z/kBSwZOsBzDxWuerk+/09KheGMe5P8qxFUCNzx/x25v8e62v0vzZxr+Jom\r\n7uBukI3z4X+Au9sbPTQ/pv7dgFxsdvt9pBmASc8rLuTE8fTm/IgmRRDatBJs\r\n+uHwYr5L9rezKV3SoAm3YYyiswmU/uAdWK3fo+Xzrm4B732+crLFZyT8Gr+c\r\nSo6W1EAjCFN+aQyp7ugreGLSe9NUVHQ7mNirjxatg9c0iqF0hOkaop7nIO/v\r\nf7fL2JLIai4YgqFQHo8y6nkbmqBDir478bg=\r\n=gz8D\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2211151402.0_1668624504439_0.651010338555315"},"_hasShrinkwrap":false},"1.2211182146.0":{"name":"@bentoproject/soundcloud","version":"1.2211182146.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2211182146.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-O+/Y6HOUrotuJtT4D8306y5LzuiQkY6zb09biPSXEKoMKBnz0qfnUxFx4hMRv/LdtrFEJkcmlhE8+2a33+XTHA==","shasum":"ef00b0d610f50586adaab3ba68f838a1ffa52b17","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2211182146.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYznHDmMG2dChd7Q4VlJqdghN1nfRPmOnl6NPj9nEBYQIhAOlzAJoxYqXnRXvuBuuernwh3ZBfOEAuZOhZ90osgs2C"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJOJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNmg/9HD8H2SwgdIfjxZpwEY0kaN3sBMsrIeaON/nSgYnVDLAlKYYR\r\ngP/RsuW1xG3CHKu+d8K9tCgo93lRzOIt0qAn7hjyi6PNW5+rsV2O5N94hSKn\r\nb3BUAmqpxiIte2A3axsKXLYEkCvQIcYrqTRXjL4NJn34RWPc0qBaRnBBgfEs\r\n70pBYvCzABLSzP0lmLnMUhxTUPGrbxenB6gGS7oxYmrtoASbCGkxRAxLcN2e\r\nxBQxOhAG5dGpCBDrpRlmo9zsupQMf+/bzA8bUpvHL+uJ6TWFZ9vx/kuTZ4I8\r\nYQP4AwUf9Jg/QwAPjypIqIjt3LwqkqVw1QVX7BTCIUC/7hAWLRBdhkBhpckb\r\no3eLHIx/X8Y9x/AHcDLVmfiUR41cNDAlXPVZB8VjxS4MPPW8+0fdEEwHIQEF\r\nUzqdfzMonAnfL1MTm9a5ejfLwRWyQwVR+GjLEak/m9GAxNxqp/2fOBn0jKsq\r\nlO9wFS9ne2wC3Tdwjp/0PjS3K5YIo3Te3HJnNf3yxdgsdQ6GsuWQ09w7GMLC\r\n5Vl4frZfxkpr/NFq6Z9IZnZVt27pvlgDwTxq2l/1ktElDsIeIAFET8Y2gX/A\r\nYBEZEivePXU/iRbnJuJRA5XVsXGX1Rc4A9ZDDo627ceJPkDGfxEfYD+Rrroc\r\nCxkq/C+7rB1grp9/UPPHqfVm5RUfztb5N7U=\r\n=jcsn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2211182146.0_1668846473649_0.42187501806992667"},"_hasShrinkwrap":false},"1.2211250451.0":{"name":"@bentoproject/soundcloud","version":"1.2211250451.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2211250451.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-tyOm5Aud2KwCQ3yLtLQlf86vH5ePelsHAdrIrF435Zp0eHsa55MZCOl11LMEhVClWr3idz3Tktt/a9Hz+fOJhQ==","shasum":"fbe9cd0f94fcbbb978b0c798d0f091b60d33d2ff","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2211250451.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUL8zPayLhcicb9mlhbYr84uWROVTrMtZ4ykhsk9pvXgIhAN7DoFzito5SreCMuTOSLCgr4iE0ZNRJyWL16JY1t7VV"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjgHw4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJlRAAopnGuEsLW++NOFRJzeU/9apQdXuPFpThmsFMVebFs1N4PgnO\r\nUxcv/COBeGYgao0rvDoJoe7NoRafhvkTsgXZ1gp2PvLMCcpI9FUMbhnJ/mxX\r\n92yGJebZOV3ynZCy01JcaebWhrtfh3S6n0BoIUQretv9e+h8eJnW7sQluqhG\r\neUi2uK5W2G0g4mm0uEFvxNckuhmgLrbe1Q14dvTDxty49vGEEYKVrOF7ghHf\r\n3zFBbPDbfKWFEU41A7dyHCMGUBePID7M9B5RVjiZugq0FpBTCifhKjIuRaq5\r\ndmc1wE5uVeAE8wl23dgiL8hhawbjSAASXSpUmJOTgsLhAiIqcwAbPd8AaqHR\r\nNVj3EHM8KvALh+9Qmu9y2LjJBdJhCRFCQADl9exj5J4tlpcr+1CFtRdCpCkx\r\nt0Rl4y8Lbad9vHBodna8ycCOIuJmGgpAwHM6BWieLGn20UqXNqNEzondpY4F\r\nMj3v0m9ndDNexCywmF/XGQbOT107H6ZOxo2X6JaWpkUSXYcGAk3SS4f1/sVk\r\n3ofi/CJkQKH2Xg3UbFr31g3O+y+4MZ1yXAyXdd6Uxf1EBa6XXzhFn6lVrx5m\r\n2JfrwCnlmpoGwKhCpwqiZ/v0jfI/GAlv67DxggrU4/NEEo8N/cIur6FptPfO\r\nl8kgfhJA8mq3NJbWs+HaKz2Fq5glrExwlz0=\r\n=3an0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2211250451.0_1669364792446_0.4811326219926717"},"_hasShrinkwrap":false},"1.2211302304.0":{"name":"@bentoproject/soundcloud","version":"1.2211302304.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"8ec16ecf1bb95c1a6368ab455a6cfc7b1caddc46","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2211302304.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-l8NbxdZej4ikJ4JTXjcFt/W8mWSbd1NZxXbmfTixVBbhOw8tvGtvDjlTnAMbH5mj9GxTF2JpZFGWdV0cwA9Fzw==","shasum":"e0b1b91ed7bdb8fae4de0007845768506b118489","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2211302304.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMoIXMT0AC9I3i+49KOuGnNQxCnx0LeSBsoaZ18EntXAIhAIxmuXfxkSIyAnCAfILLUQ9tz1uJDB7OiSuBu9567H0h"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiGUPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIZw//dcWx4SqpHbVkMFjDyvhhIeHPPEHv5TT3EOu0hfLbCxMLH2OU\r\nfomcm5agR5CQcjVqjLsHyDME7mI6+vVWC5wMcxNVc2e5ZNuRFPZkkmL7PlsN\r\ntCYgccB4St8Focaw3dngPg/jaXOwhPCI8S9b5BRHx+vCfP9cfpUlLWNg08Ew\r\ne+tVcP/aZFBVx90ctj9elo1Kmgw8PAh0LGZwxjYtuJJfQ7yQo7SO7W5skRzR\r\n+xut7orSoUJXkB3mMPuyxcN7zjFYeonIeeZimU+iUkkT0Ku8DjPznxOHGz2w\r\n+DwWmr175uIJDVVRvLsZQzxACDW7MRD/0zpsOM0HFid4MOvM66AYl7nh1RQw\r\nkDBVdlYrGt7xMc1/23qoROO0+qXKFFwWKPYV9C3wXZgB+dfX4wXFpIeIi40y\r\njcTsdNuKfr4G+RgTbUTjji/r/gZsA8whC4v+mnyoFSESrraHPvlRs0LNQKK3\r\n4mTFR9EyQ1cd321p9g6+hlUFwC1BZTe2vlKywB6bPcUrOnO41uCuWicLwz96\r\nxjNvRV13OrBnajO67M5GAV6vlJTuCM500ciIrhRnIiaCURJrCHB1mD4dmIdC\r\nz9pirSNON9sYUc1G9FfJn5xL6bTmy5st9HfizMWNqA3/MQnWQzpVSOgrgak3\r\nW6PqNZlsZACo5FB9fhsOEUQaGPbJ41zbh6o=\r\n=6+HH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2211302304.0_1669883151113_0.715625267966866"},"_hasShrinkwrap":false},"1.2212071834.0":{"name":"@bentoproject/soundcloud","version":"1.2212071834.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212071834.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"9e7a659da459058028a29b649ceae3a2dda7771b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2212071834.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-WW0PwRJozimTQTm5Ga7WGkrqWIwbiojlYQUs5mSx7PhJwM1XSThguDxeL8OHmJsBGY0G0tqvm95NeKd4Cd72Nw==","shasum":"c870b6ef3a6848c2ddff3f45387638cf7575ead2","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2212071834.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAVfeidrkxmJigCnDBH8cTGToFRaq3rlaul4IFjB+hDQIgKf2o8Bh+7ntZRmhkYUYfGKtxjPStKy2w1OLMkhprHIs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkOwPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQiQ/+IP8uT2e0glrsrp/291ZhJz4ovlgGgCEYCUKWKgTip3HsNS6Q\r\n2Wqdwfe1SyXRC2dOiQWgG1EDT+K3zWC/ho0G+xMaAt3d/n4X0n8WO+sBm7S9\r\nRmY8BD6zdgiWmLdSNH0jTLF7N/iyebiXrL6BocOBCyGPFNYe2SgCbhuKkjpg\r\nwUJx9FK/Lge0GQAaOcCtjekS1tRoSRApBv0KOmZ1VSv0qkDXPgU8rmZkKjt3\r\nQxeohn78M9POBdD+BI8q7I17MbqiMokRo+KfWIaXV4ox/zWrDAjArlCnbqSV\r\nI0BGvLw76qvSU+pb/mk+cB+rKAUCX50S3mjYt2hfz86tv8SWI4n/17h7wiHb\r\nm+BXT2urooPrRXthX9unfptk3IzgE5JDM1m716lueXW4FEEpKAL0kynnQ7/e\r\nGkmPLdfuvkYnrBG7a5AFjMtO9ri8JIOsVgXYoTSyxjy1gGbAszuXnPJS/oyc\r\nnz5Qb72YUIHpaonIA+r1zjOGtd2gVObtOBy56ynCH4Yvb0jKLfMEsgEu8f1u\r\nFNKd0iIRbW0iPEO5B4u1TuLH6+fvbgxymen9ZcIKNSm74m2rJqIqQHsKKO4L\r\nJ2Iew9NSugsUrUEQxlbylN6IH39sSTXhvm+8H8FrsyAYrmVo0lqHWT0fI+ED\r\nPKmBURRFQk+zjaR9h9yjiec3ctvwK/eVICk=\r\n=+FhG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2212071834.0_1670441999179_0.7830490225497904"},"_hasShrinkwrap":false},"1.2212092023.0":{"name":"@bentoproject/soundcloud","version":"1.2212092023.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212092023.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2212092023.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-8Ya8yuhupyZKiw5tKnYsugsL0kF8sRqKIj2o4FSx4ZJBa8D4LQF2AliZD/R1BfIBOu9L6mCu1RVZjrXQIc4D+A==","shasum":"aeedc303cd4a27cdf6e5b866cd4c1fd5c9c142e4","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2212092023.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAftrTGdxSAC1BdObCA8uxHzoqzG5cJO9CUQQrdd69iYAiEAyQQ6C3bdgy2WCSJcc4tYtNQGz8avLiYuFDlnLV92Ksw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlEK6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+Rw//fiCILypXujBf9oMZQIjerpTaAmEPPgpA90Vi+Mg5w/6lAtgI\r\nkBPIvT4ueb6LN2lJZBUx4B1Uugc8UpCghqyuBv+gMrraEnZoAvUzj4nBWZLm\r\nZ+05jU5JUYKmJ+XjI7izGcUdh3awENEgauv2xDZq2x5Jf6GVwQBzHn3f82/s\r\n4y0Ayy8fkYqTW9yoYqvEjnczTmMfRwlkURq3F5aTFRSBM/nd++ZXRiBKl0av\r\n76fCSCtvMNrxw3CueF320Jh918hMy6j5uNNGc0XcHL2TULqC+tiQT2MxKKoE\r\n0qMY2WfhMW50onNw9ZEv4n6gy+g+C3M0S9qKLsFWnFidSb2sBY/j8F2AIRwb\r\nfPNQJMO2Zc6PlcS5f2v9CmRzNtWqHbLozluyqeSINPJttrKVBjdBwIfa3INO\r\nNEI2ZYcXtVNmaFaIrMC/WUD/HFChBSql8Lbu0piurT3f6aTRhajy4GycVuQK\r\nEFdVugcV0G0zaTpKR6LfE9mN9MLAD8kEoGHC2hZJZOmRKmtRzBVm7/LZ369c\r\nUibYSkD6LTfC8OVTAJ3n+4MHQ9dLYhE/NlIvLhx/VGrlCCAZXaDX/ok1ycF9\r\nKpTzniZkznOPuhrD3mQBcvZ646+8BtQDmFis2y5BgAmBJAqmHBxOufRFZxEN\r\n7QWNNI6MVw6SSq6YisG8dkKz6F9mNWUI/lg=\r\n=DSDA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2212092023.0_1670660794365_0.26940106686566545"},"_hasShrinkwrap":false},"1.2211302304.1":{"name":"@bentoproject/soundcloud","version":"1.2211302304.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2211302304.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-kR9KyCp7PLfIMGMiEZd+Tn+bvvL+BXNnpSSRTauuma4OQ4Z4DH+mRlf8TP/MBaV/oftliRq3P6hQweg3LrcFdw==","shasum":"196194d3aad3a00d13a485a0d80af171f12534eb","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2211302304.1.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlx7t6lv71CDH1vE0qiN8mpYLPdMfljcHNQl/RlKZXdAiAl3IbLbkK1SevNlhPuc/CnVkF6Q7EXJbdWKoLCU6UdqQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOmA/9F5sUuVUC3DRlmAoxzawBEIJJsQd1kRFfqXwYxmtnjHd09yex\r\nI4XErVyMBBM1Gz9+UlziQtzOK41DmzCzDKRr8DWSGXpPZRlr8tMmBuiyyfXw\r\nG/4KXFK4z1ZFiiHF+JnUZm3LcIXmN70me0I9laqnt4dsJ6JsphyHbaxZsQoM\r\n2ZnnQqnJpj9dmjeO40dRTSyGih7qcTvJTakdFtSwV+3s0jkYl0nmzkGdhPVN\r\nWYEN6abc5hlANc3im+juqVaTB1XmEWPJNdA7AkPJXOZzsFdj+7bS1xry3zAC\r\n88MrBb/6Zwfn8Ol7iJc5lBnlpsq0bWSpmIxO7ePfO6Z8dYGi3np/+qbxkh1r\r\nLgGnAHY1qp9VSoL33/g31MesYu2EIPnxEJ6GiarCJvBeet6y9+7aO592utMP\r\nSOJsND2mm+uv0KmxqyQyekb7y77k4UyttDKCijdAZSqWxfBMj1Dtn3DQ2s5m\r\n+I5pvrcLWLRiw985SgM1OWjPhBOf4LwLAr11ZZnEjvtFjuGWk/xYHtrxBS/H\r\nrO34ygSfbpTFgTSOX5SE0NJGf9pEaqtn4FvgGDS12bNODJxOgxdbWsLtiQFy\r\nx98civ4Estg6s7EiKWfbzmfEjwilprsi0P7vm0UQZYEc65gEZvOviBdEnUNs\r\nq5Rd5SB5htrLGmOZw7qJadHdfHYhVj17j8E=\r\n=RD8M\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2211302304.1_1670968471299_0.8621356016362498"},"_hasShrinkwrap":false},"1.2212151632.0":{"name":"@bentoproject/soundcloud","version":"1.2212151632.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"6754eb8b2feb7d6eadedb57776b91613ad5d6dcf","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2212151632.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ebHRxRKy8MlfaXlJZfOMKL5x08iCJOmU5xF7pYeaxAsd697JhYxDXvsYbKpyZp6T8nHueJvid+UVPNqvDfLU0g==","shasum":"0c76d167d5774622dcdb523f16bd828b0a43b853","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2212151632.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsN9TibpmzM4iKDdAzlR1/ibbKy58A60U7g3P4HholhQIhAIc5mdmZFcdq2o0EPqH9OdTVnNDgK2oJeTQyLoHJ3zai"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjodqZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4yBAAk0mWqr3dQNQvHPc3Ta36cDe2g8CNjfp261Z4SYQGg6nuI5Au\r\nHIPbW/SGHWLWhVl84NvZPt+k+QIGVyRqEzzMPpnaKneeJF98ROTNLMwSvEZ0\r\nB1UcPH1tTnOJXByzIqOnjo9GwAeiJ2lZks3QRvycfIRY0lnLfXtnyFoTSMZz\r\nQIvwAPgV4iPRPs+aPAfp/6fe5dfEWnRrVn/Vc1dxbtr7ZfDndTbM0hykGftK\r\nQpLTuEb02xOK8KcuUi9QHjrNd1RJ+AYMkAPqPXKDQNM7EiX+Gon+1fiTnTLC\r\n7I7tck4EVIjdU3LtvYapLEYvZxd/3IcDRH7OPMbmQyxyunFwboXTG5PYXxGA\r\nHBuZKOZy4VRRq45ereLS4tbAXvtyxO0l2wHck8RfrRykuqAZtCT147dR+hR7\r\nuai3CaYNPvKFPlVEcUU+yq2w23uzPGKSlW2L8n2citpQg8rd5I6XZuFMhkex\r\nvrjOk98KQ6l85w10Ujjs3RwFP2N/3ByhHIBwSwZjgG3NBrYAy/xSaRJotRok\r\ncrO1IXxiAziDpFlg1jdmvWwvBCdhYgOTKWeFU6Xm8R28IqKEUZu+YXiO9B5c\r\n9U6HOq+TRBu0IZZZRIc78hPaJdMB+fb1Ngdh1KXvljs/tcWK4s5X86Wg4pIi\r\nXx+1fQidtLWMO+xiLItRgGyt44Nvj62Pwcc=\r\n=gmnu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2212151632.0_1671551641341_0.7886172418306281"},"_hasShrinkwrap":false},"1.2212151632.1":{"name":"@bentoproject/soundcloud","version":"1.2212151632.1","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.1"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"0daa515ff1e284cb2e31dc8fda7f29c073e60b60","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2212151632.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-cGFVUrdC5KTokn+2l82gKK1RCkMOJLqIZkpdHzx03FAC2TjhdDxztWKQVCmZCs3LkXa3KFmvFJ35VJIP21R/Dg==","shasum":"e69d927454a7db251ef5c79c8a30473c356b216a","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2212151632.1.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEblggQIWSzxduj27jEZgZNv1Zznrz5ZtbxSovs6RPb5AiBM1NHMfanPoyugJnMSVIrXjVNTzaNURiTXV/9Gyi3FJQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjohb4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquqA/5AVOhzLV5o/R1deaoGWcjGYGHiDKkdaH/bwtRJgXmYmgRzU99\r\ndBFor3A+e9aGnuFKhjpuJa+G1TFY59PscwRCiMBAyHIehlrpOKzyD5aPUEFg\r\ne10B/tm00lt5yRjWl9XoecTU4AvUBCPRD4+wek1zPL3gH4DB7BhP5mT2iuQ6\r\nwP0SRapM3y0fVhHmBQuJ+gfBc0zhn6vXB1QHcnbpcP9IEapNShSl2xCaW5nB\r\nEIVWCRDLRl7gs4fvwbcBQkdl8gPaOYpjCC6VyUKYXylznWgNq+Yvaz27eaiT\r\n6r9AWfwVoxoc1FrdHcuKUm2zf3QlXwHgMvifXkpFOfgNyaVkZXuGCvSXZLo0\r\nyQQRykffrpAFG19ChsiVWNbL3oiC0XYCIH2Db18ItUZkG32wbNpOc/0kdlp3\r\nOY000cz1W0qHBr/vkr6kTgPhpXdpjb/sSZlqJ6MeXQLFunkQFmriAhaIbnbQ\r\nzvX3lCUWav3rGXE7SUBEFmXuYFIz0bi963fzy+53g68pJNF9kybMGANuQ43Z\r\n1Ak2dwCzplZs/qb33iM/6h6WKc7AHmb70D2bcJeDkDRKMzwxVZzhkh40Ok7C\r\nn5pAPku7MkU9C+gnJJxQpMp6G2vKOFMS/6oPy1G5YIdoNxdh9IbLbQB/PmyQ\r\ntxiZGvUFLZji/GL3eruxCbM74G/M15KzUx8=\r\n=tGGS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2212151632.1_1671567096661_0.9841697417810122"},"_hasShrinkwrap":false},"1.2211302304.2":{"name":"@bentoproject/soundcloud","version":"1.2211302304.2","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2211302304.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-dC5wX7WcYcr8K2JkoCRBNQs26HWm1WsSKVb3wLk6Jh2uehxuyFInka5Jnsl5vcHVDdZcS80kU8vn90MbUgLWWw==","shasum":"9a8981338d25a883900431d86c836608d1ee10e8","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2211302304.2.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBhuiWVznEUUva3MK+ykl3A2vf9lsS+lI4lVYSo2o/lwIgeAfabqcjlI6N//PCyfMSAimj/7A3uPa2aFw20n3s3J8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjojh7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVgg//ZxihtHW7gTgH+uBlDA6P0yqysiqFGMjzIcwrAHNfVeAC+p1l\r\n8Xah5iW4QAjYmh22MpDyE01Py1KvsHRC5OAWiCKNGO6ju5IwJAtTwU0Ulldl\r\nJwcNOOvV7rVEliv6LW6UCTwYNE382fW2fOFePdeguEPSlDpPBYu+VjnqFQgp\r\n+qA++JGuiHABo5zqlpOhWD6900rRy6IjA1wM/qDpXR3Qsa8wXlVmqd2/gx/m\r\nvlwYE/T1H1IBrRpS32sb/B6fbYQzE7kYMGRyCC/6Whs6y8Flaj0zN7B2nxnf\r\naR7LplRoR/KwC0WL1/fVd5ynQ4ttKGauN/qp+oGcZP6M3AEMNhJuqFAZZWya\r\ne9jBsERmw3B5NBOdEnjLz1U3mjFlRrLmUyIyJRSDwfoRJcAd5xmIUjXVhoM1\r\nmpCBUgubmUG612bsIN23X5fAWS5D9cnwwhWUhYCG3KDq1BtlZ9eJdfKcR6Q9\r\nBYgQO8h6s1XUcsqCfaUEeOzRQatWwQ67A3xD8s2MrhtLL+1twT0po1CRNeRC\r\nm1TAMS7ZwIntJmUvKbyZE67ttTv9u0Bitvx6JsdSwCCbvOR2matX7VlGrdq1\r\nTDt6WBv4uuwnFmr1vO3gJ+lmw4hsTWPF1e79pU/zc/hjSDLE7WB7VDLaDvMN\r\nW4ic0qMb/VCEtz9tFn2JxUMlCG77ah7lH/c=\r\n=0ItL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2211302304.2_1671575675722_0.9540752410126201"},"_hasShrinkwrap":false},"1.2212151632.2":{"name":"@bentoproject/soundcloud","version":"1.2212151632.2","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2212151632.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Aqj8L9sheki6K3de9PA1eGkTTOCzkT3ltjVfK4D4p0ZfcGROdy+tutOQG6FEdE3qkf1UgSeWCjsgKJqRAWZ2RA==","shasum":"be00dc6998ca2c4b625de3b2b287a9b9d08b0977","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2212151632.2.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEEFuszRYm0YxkBt3MVp0z3XtBTeH2AWQt/MNKBv0nHAiEAzPrNtA8iYBfy8yk1M/liF21+A7Nc4DXrpx4rW91XXKI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtHB6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqx0g/8C4Wf2Y5lU4DnMnfy1A/ab+FCg4epIH27Ixw7gaKpkFJfAd7t\r\nabAnYaPeWPA3bH4FYcyPSSF2l6VmbwUl534jZ19yuVXyPYdBzrhjKht6rEEA\r\nl0eDIDYxz+jvaWky9P6RRdl2WnV6tNRVWq98VLEF+s+oDCU7IukPx9bFrzuY\r\nIPFtfqkm028ZBoL8LJ+bYN6nASsF8RJO21XFsDaC2fM85eFsnkK/iKBboyI2\r\nVKLecBR7vHtO6IrPyK3GKg2Z7zojMyW7uUIix/fOyj5MW0dS0I0lvDCHMvLp\r\ns8z1RWC6ofiF6JMCYruVweKF6Nr8cJzL0wbUGvcvXQUS4xsLWsCV8IUJiW3y\r\nRAw8idzNsuL0oq4Bv2PQ/t23qp6WR+K1bQmzvmu45djiNZ4jaExMXARObzdt\r\nbKe6C86qzBKI1iD9/F0x6O1t5EaucMO9uUKRURiH1ACbI+cswc+D2NO0+kzl\r\nnDosuDyTOLSxdj7q4clzW4wNhOp7ZQUsMJbJiyj3DWNcGvlTpzdYJqbx6Kn7\r\nFBht8eZIU143TSiTDpSuG3zavVayholJxYckaZMwwYJKBQb3+mscqD5I6RgD\r\nmNJuWs0rLNpPwR5Au4pqBZPGyoAgt0d+buwTwjkZzhQd8zOlEGlSFRTOocSn\r\n4LD0+ENDybM+7W3BI4CASUyobUmyOwKOzTk=\r\n=UghD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2212151632.2_1672769657768_0.8066752152963981"},"_hasShrinkwrap":false},"1.2301031703.0":{"name":"@bentoproject/soundcloud","version":"1.2301031703.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2301031703.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-CuKTSRKopFN53Rmk+9AUj/gCUbXKBeE6TXg78HQNLkTod9rx+7XdwquGFdgtprI6HaY4VgbZ+DbGDqY4R+7Gxw==","shasum":"82886786ffdce8eae5d07bd90a2807ffc4ce3ff6","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2301031703.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPpxXHPA5pOBDBU0iyuW2sHGvp+UV7gfnLG0cfMcIiyAIgRGtzCLOGa1/648lDkgjQsyazadxUj0gwpA5Eh1arG38="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtJC3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorIw/+Ny7y2MAhuyFOWVOFxQ79CpnnCUsD4Sq3VIkouV67AFYeLPqv\r\nuvoEh0kWE62Ve735cut6j2xEJzfZ/cKIKgIRGIihotHRA7M+LtS7dxXRayJB\r\nTt99ddHlDL53/Jqxx46nSXcgRbdYZCUysXsezUUHcaZbBguxSXvLKDYqbONO\r\nKXlxwJ926ylJjzpwcrkHom5PyL2pJFW//oM1XPYMN5UxDqtDwNy9OtZ5MLAI\r\n7RQhjslytfVzFkzMMkFESttHibFSz6c+NxRq1ML/pT8P1pjN71Bs6La5Aqf2\r\nUtE9LnaNQ4frEgp/7aSUqSzOAaFbkiCpLYx1FOWMsZaYWvz9PJ6kDyb4vxqO\r\nfzWnCOMuKpmnhlUd7Zgf8zjEEbO61kr0wlqqLh2ER5/9PkmJgpyFpnszHZeD\r\nFN0jJ2RvbKzBCzCBjWmdTyZ4GFo9+DyAuSUhzfYPOk6bwbh7esR18XEldj09\r\nwFSFq1obhchS8dKrSaSU0jIX97v+oXDAmzyjtq0qS/AkgAJdRzpEW+0edTWX\r\n64GsGwiq6N0aOawlIHgEmxMrMbX2izwO6E+fHkEY2WJ+JM3Y3OvVDJvFwJpZ\r\nB/F+pYxO4oCQBTIS86CjNEI3oK/6YyuEx0RMk/KHdxxjrfxrHLgtpLhXZ1XG\r\nDrPi4aVWxD/SLNlCM+R24agIjwk0NxOX6As=\r\n=NDyR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2301031703.0_1672777911124_0.17205927638811813"},"_hasShrinkwrap":false},"1.2301032153.0":{"name":"@bentoproject/soundcloud","version":"1.2301032153.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301032153.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"418b16026c82f72bf8e885668d34a40fe043c9b7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2301032153.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-KiOkv211Pe8qQy7qFZT3MNfL7TRaSUdA/AC/sHHXNlkBVHF4ZnN+DfYcV1cvaEzP+dcrmqLhDVv2QRRwme2abw==","shasum":"2965c09573ce521f170fc1b241c02627ecccf33f","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2301032153.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvqRdtJaVs0eTNZiXGMjlU5T0S/G3WbIDAULrH8veSkAiEAobhHzhNSPlW3Cah4Z4MMskiZ6IA+slf3JdqeB5zDpkA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtTg9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrARg/9HMye90VcZSXtoZ5/RbD3oM+MF+7Vj2Fvrs4/0YmUakD8ujW3\r\nL6VgLibKwRTgtru9h/Qguv2H/BBHJvU2fzvF4Z9AITbhr189zmTk09qzIo8v\r\nlaP14B2Tjv+8FKJMkToIpYJowT9HB610moeI9Df3MA3USxVVjg+6fB28iAqW\r\nNdS6uCnn2Gvyo9+0B2pCIVO/M1KcImc+Amhdw1tFhbY3k2L1/3jkynZxnYVT\r\nn+cemi7irhARneTLkzHfwghLQWkIsLyzpui8AjVG3QhlFZgjE8ANZ0diNDlK\r\nSx+88s63x8d9WM7RQu6aAMns9NfNks4AA0QHLbjPslXwwP+H38vAJua/7xh1\r\nNzcr39ktJijV393T1NRYu4c0ASmm5vLqe+fdn2JUd8F+/XjQE25yDb1OvvMv\r\nRpDvGriAVBkDewMb1xuZVdzb1ZaaeUFuWS11W6kJV/9MJfZvmVQaVuh8wk3f\r\nzM9sgj6K7+XluPVWu0V6SP+9LHvWUapqwSWEztyYM6axjo6VvoSQa6nRIyQ9\r\nqIhB4P18Gw5l3qe9JD+KX2AUKiqr+aGMohBGQEB8OTKysG3+tu1feDhQl1ba\r\n9n/nasioupxQySMNFgyt/ykR+n+OSSFWco1b+eMrj8A7xVB9GZwG7+lu5cHG\r\nah4N66b/H1+jgUxIZ6O1V4Tq40pkTobsuCs=\r\n=sFTD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2301032153.0_1672820797047_0.4724551401587822"},"_hasShrinkwrap":false},"1.2301041800.0":{"name":"@bentoproject/soundcloud","version":"1.2301041800.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2301041800.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Mts4hrGDb2Di5DCBpQYFxu9XkZLgG5ebpRUNNPBIjdq4gc9pHQ0ME6WgKd0zRNmqAZvRP2X0aWnBTfdWhodLpg==","shasum":"1e7a00f7ff0e593794fde0fedc3ed34e6b63d566","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2301041800.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTv8taPQ7cpimeuN3gLbWiGpAfNq5nVu/59Bz1en+2XQIgJxhu+h2VTtNVLYa+1mnvadEnta93Bh4j6JImT/tMkc0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtonrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSOQ/8DhAbKEjLosrQxzNes6mVM36KK/BfJVm+dkdHuMX/xwqenPKd\r\nIWANyNWsn4Yus2m4GIhTg3vaP5HDf8VqKSGru/T6zX5bB07IxvXnirKSJe/9\r\n8Zr6ms7rYH1sy4+VKhHMHbeLg8wltxwQv+LAp9hkBHSMZiZ0lRSG9yzDU+ez\r\nSet8fmyAZxGNyLyyF2dJwZ6ZdhFq/EUJniCnBk4O6Od2ienqKut5XMGGVPe8\r\nRVqv2lsVgTeYrVTIZp9QFFdDXOuLUQEgDLWQAY/tBmsALz3gtfhYG4+0VTdG\r\nzGbVzh69dczTv/2+MPHolAPb5ccOMZVFKDALr6jtuevWe8uGeXoUFsahY+ZG\r\nkBJUAe7ob5S4c6gVBL5TlMhtxHHsZdUySUxfbfip8ZwAOQae1UG4s62C3sby\r\nDVAlaDYjNUbnPr/mD24hwj44xmMXy2jI1j8jjGCYum3LzES4F4Aui/rBi0xR\r\nIpmNjEwIz7c8naLXKIYhPRAvnwN/fG8NWmZSoNVWLBWUWs4kDknlZCpzIkbE\r\nEfGuO9Nx/dl0XDg2pac8CbMl6FRmuh6O2fASZbusV6K4Xn3jw4j6LaNhMCvy\r\nW0gwFTkVOujPFPpEinUUZaHVzFUyCkgBqNpnJxcw4rCECJNV0Rvwq0uVp+zD\r\nSA4YMPlun1r/4mSjsv7RJ015TJNZOHAehQg=\r\n=N85v\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2301041800.0_1672907242909_0.1428995189346305"},"_hasShrinkwrap":false},"1.2301100345.0":{"name":"@bentoproject/soundcloud","version":"1.2301100345.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301100345.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"12a8a2eb9a3656064439da35b736023090e7c78a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2301100345.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-cYJZzZUm05QIqlXhAWqgfQXNef3m7bLtM9pP7bhVJkazygjkgGcE4Oq+1aF+ZnZa9xvGq3VKCUpgyKEJ7qiKNw==","shasum":"44f04253ed10c4195b91871c53902626b048bdb0","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2301100345.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICBwdJC8yF4YUXadz0dURkRaJI4Bjd+Bkb+/S05aY6A6AiAma8CsqKN8DABYmAQm3JgldSf2bNT0HQX1XXYBO8kBFg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvSF3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+OBAAjmx/e+e80V2oHZU8VgwPj82M5Pk4Hl74Hw31KJ/wy2d5djUT\r\nR/becp5yM+1TozY/sQbCDJKYCsHxPr8vz4ElUeJewTV1H9wmSucHxu+3k/YD\r\nH7VAh4Y90L+YlUIBApkws+18AXm8+RMrXnWTV1VGwYBknWPAsrVu0iZ/XhRS\r\nqsV8QIrnQVnFl7JqU7krsZzTUjyjiUzT0YL6i7xg/nIut93DV0183v2zmEfN\r\nZUi+XCHm063PyrJBkPQhb1BqpqyiB9bzg0P1czgKjr9ttFWyyisALCg6m6jB\r\n4XJThUu1sU69w6DPIYK1OQrDhw27JoS505lwTKnYzUJNLesSm5m0if1NIkAU\r\nujt6j5OMNgfXbS+Dv454kRS24tKj7PiW5TxSKPKEcsUDKzclwAKsutg18HGV\r\n5fbMyqnaPL7/y3O5vZiyJLFYz7jIZGzQd2Dbfqpf2CmH3dLokiRzHovvKUcO\r\nRWTO6s69hoJXvgsBsXQgd7f08ZSddlv3THvPdJR/y+Fv/pyMdnFYN6KdIDsx\r\nExCtdpKqsNbjMXYzaKEp6FP0FVt3I+4rmPS8fEvfaKwSk8xkgA3YBZsIyD2G\r\n+tmibdwhjaHlQm6GM7h1arghip/MOol/fvgHCiiWixDJLK+do6kY8MnORbbO\r\n2GO+3+qWoOkhpv9Tums3saAGrditanYjYR0=\r\n=m0xY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2301100345.0_1673339255021_0.1706018369911393"},"_hasShrinkwrap":false},"1.2301112346.0":{"name":"@bentoproject/soundcloud","version":"1.2301112346.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2301112346.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-wIIObDsSlvuyYHx1nqiN6HhxXHAl3Ln0CJQjda0zord+WBBjOy0jYXuvTASkbQghjuJsP3MO0vzgsk/NrbNVvw==","shasum":"5cf9945fc3d2de1550378da2e4e04e7cd9d774af","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2301112346.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYomuz8wtb3g4pRLPFpFVyXi4WWnFFyT7SbXg7QDNDLAiEAvXm0PKmfe6/C7HQ6ZF71xgYD43MsuLm0DWN7nRvZW4s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv8TVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVxw/7Bx2+SgEcnol6s1Kla//0mONp67XzhG0C4SH+h1n3UrIoapcO\r\neWNP1guJZRICWoC3wmupu2xNEj6V/fBrKKU2s37wIrMXniQnx/kYT3HZGGQy\r\nSlZiwEkcVQZNigW0T3Hgd6NDkN8ZlOliGVtsl8LEqQTOp7ykvZNBBgQLDs2y\r\n9/t1vUZOfEeX/c8cl+xqMNwmHjr9gWUTZa6xO62onwz9vbn2yckFiIy3+me3\r\nwGoVljyTcidtd0+vJzkSbl/RQxjKJ2dD51YAHc5OAYk9TdJj9UaFliY5CQL+\r\nzr50EzOu6SLZ22+nCmjsCtODuaaJUW+6qk2N9lYixkCaxtO3JSR3tRqOsUr8\r\nJGCIciLXTqYLj5joUXkVj1AHrX0PN+Mrv6kz9gEpE2wtrIfe316buOiG8vuj\r\nj4xR7Sr/g0yOrLKEIQbQcszra04Qon+uvyOfLSkej8KPRl50j7i9X7hQ72mo\r\nExE/dSeBJRsen2wl8H7IiXO9Tw3FmI68bpNXH0b90F+wiG6RkgAe/jwZvZQx\r\nWZZ+P5rRtVmd6LtVlMXAan5RslABs18A9EYc6NBqzi1I2k6lV83LFT0FS7VT\r\nVTOu0eW5ea9mOOxp+1pJ3KHmNAApdoEYVrO5iw6QOImBN5RB5m+x325+rKin\r\nyZWXZ5XmJTRqwK5hVHS+vkhqpKZdu1aMil8=\r\n=uKOh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2301112346.0_1673512149155_0.5048291044820667"},"_hasShrinkwrap":false},"1.2301181928.0":{"name":"@bentoproject/soundcloud","version":"1.2301181928.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2301181928.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-P/IHCTMbcKX5A+QbGVLlft80SiyUs01bEfq5BVlGWKl7IUwa36f/ud4rS8StSCr/giikzf/eBTHiwFoPg1qhXA==","shasum":"8dcc0e06d7e6cdc55480565b9e6ff2742aa24d18","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2301181928.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAo+6sdq19vAcMxyD7/HLSfAvBdSvtZPk5vQMqYWHxwuAiBZWdY2xeLQMEJwJbrfBJ+AbirSzp8Ovd3EKWwJ6jfFig=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyP74ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0tQ//dKO9cr07l9fIbVElo5D+vrUscmJ3e5u7l9eKazCLV+5rnHqY\r\n1RWau1b1y8j6HtDLlOQQrU2PSdAhzw9KIHLltBePEjR0ypa8Jd2Rf1M6pmDV\r\nXiKVuhmGxcuRRrLveXqoHj+Exk30sn+sq2r2qRNUBHhjjjti7tBf4MtaNOs8\r\neTqux7dDLyzR9ap5Ej7I+uXgAP9rr8C1LOdyzTqOJw6FZIQbzReAOuXFWXac\r\nyHX1pZJTyAD1Qrs0Tk/+3wtnUTr8z5tQvBkpmaCtLzrVRDDw9fQmYS0b0Mcc\r\nx39lJp4Y5VTCnH6o9xk+2iP+0PoM/IAx+lT7yFi0qkq3ZkmCj6LV+8VaDec8\r\nEoG+1LR2ABvlplI1UE4+Q01daixP8Vvv2BE4tzNmsp6EEBQEatRZXxTjlLtn\r\nePpDYBut3SV8yn8YbR3mxHC2IBZYAd6/JgWtsLWm+wq6sRfTfkqmTVTOcVoq\r\nlHg5eJAwow1A5M120TxrXpmFhyy9Oy7+j2fzKzM0ijekBZu6Fu/DmYn0LNDM\r\nWTN9F3zOwBNG4tJqGGTyMTH6dGhnFKOvpBxMPv6C0V09FUOW3Hj8Zs6cEbDI\r\nivbjVcMXEGTAQGqfcT41TDMJrb8EINjX4Sl43YHceoGkFhhOeBaT2iuA0+P3\r\nJYq5TRUnoY+ZoHLju7hDNt3m5IQ4nDNIHJc=\r\n=+kLc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2301181928.0_1674116856173_0.4907643362293923"},"_hasShrinkwrap":false},"1.2301261900.0":{"name":"@bentoproject/soundcloud","version":"1.2301261900.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2301261900.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-80ViTV0Q+h/xIA5nl/8adECNGXkBvF3yI7gM3J90/dOUNmOo2S0W3POg+CbUY/HrJHsHr4uBncUNFblQmIfDdw==","shasum":"1c78ce332275415243a7f588a6d206a7cd7854f9","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2301261900.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAcIAt80JsNRQtTCVWKK+S0S87rJ2UAWJ1ripQQDJ4TAIgPoET29KOa597i7xxtr8xHeetWcmcHlBW6cE1MO1aSu8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj04tVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3txAAlF4iQWwV2NY8Yo4bjhGcByql4JXnC10sPzMfkDXD8KzV5pk5\r\nFtkVejp2qC7dMpRrpyrhBsdE1q0MqopMNYhSCZgSyCYwqlJ1+nbUCBKBVqqK\r\nJOoqr3dwDIiUrJlZuj2ObqpL2dpU05CU6iOiuS7187DUeA2b64zlGV4O2PTn\r\nnrWbnpQbROnO9QNmrFTtp7y6yWpuP1S/Y5L1nHTVE8gy5rCpax8fQ1OuDg8P\r\nMCQGu321Vg4SDEUJ1ghXjkT1urPEY8FsJUKTnNKDXqegjfxndZ43HrB7lY18\r\nyUDKdKaBYcPhSirdvkZR+sKaN3YcqdUJ3rubEmLaKrA/7KI7YfNJbTAL3h5D\r\nGxTaTgYGUank8PjRKZnGdPyLB67YaWQEwuoFfHbpTMuODB1i2IJI8En/oJcT\r\nm/712NzSIb1N0Zir16BL3IFVg7fBEKTq23AxTVtYfomQA0JmJiJH8wTonYto\r\nCpL8V+oSOGq8GPU9l33MO3HELOO6fuk1wYWE2Xpfi34B++4DRZmxjQkNCOHC\r\nPUoNUAy9T3tNbVoR7msT6z2vWjPu0rrXpYM6t1YbYXhbORDHUKwWDtAFZrFL\r\n0ZEmAAi0sQRKAjTXZqRHDHGHCOrLY7q8IxdHN51FYxlSYzfwB1a7pQ9zgB7w\r\ngMgao/hmmEOnW9pB7sYLbfyCNghalw6dysQ=\r\n=zKfe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2301261900.0_1674808149285_0.4739865917010464"},"_hasShrinkwrap":false},"1.2301301810.0":{"name":"@bentoproject/soundcloud","version":"1.2301301810.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301301810.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"06d7a2baddf76737d7cde110a7b4bb9351feb38d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2301301810.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-y5qdXvMoVtDTxB83g/ATj8M8Mx41YR3wo2k8QiQOXqz5+K4PDkj91tqVKYurHEM4vn0UD+ECuDJ7HdfU4Rsxnw==","shasum":"21a3f40d5a2b45c9e822f9cd08a3223871967e62","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2301301810.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp97UAFQcaYOBTo53etDiXDmL8RZtrvKmj4//kdf43QAIgCgBLDhA5i4fTdcN5affXPuOsUhVjvGQAkfzhS6h/QTI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2NEOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolOw//Yoya2qhIJ1uIT71bhKtzy4h1JwRHOUkBglillLE9XWSjNyxj\r\nqvsyEb5dlINZEgjgN4hi9OJXLU9lRlGanCGVL6lFivdaDZpbuzRBJflI+ZIh\r\ngHj4cVdpMgJ+bytvgeiqLI+DmeB8TZAPoDLSi5CSl/V/Taj4/r/MKUwaeluB\r\nkf2h0wnivMVIyjxVBTOlt8lZ8Ec9N64IAyFvurZx4L7L007fWpSX3QmS9nKy\r\ntkvehTjS9gp8YO6l/x8YABA8ALIcPbOtroFkIdVNwsy1/hQ43UktsOUnjxIU\r\nTHs8eIhE7/hMpvBqi+seoYsDl8ctqFQrS1R52R7wbuTg1rxypLY6D16600U2\r\nwJlepGs8y8FhjIGjtEOTZVyoiOZvHOP68K/N0g2PQW0MK+JdiMZFeCQ7ms/w\r\niOTrLlv0XsJEBnc8ufX1YhVBpQ0KWbuf95G8cEzAZiIYZtBKCPNjjRIucA6k\r\nCVlxeZjzEgIJGaeIKn5TuYjYj0lmvdXTzqPyGRHa95aHMxqUpnBbkpyWyxmt\r\nu9sXwfACdWd003pw6OoelsIizoiZF5sN/81niuxD0FNn/6BKDoYdwTBo6pgp\r\nG06YYCuRddxKLs4iuFOObQpHvnlUQ+UTR//h9paGaQ5vArThMTelJLNjVjg6\r\nsXYGnVws8q4u7lEtPjOtP2/6xxNRvbKOvfw=\r\n=I9uc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2301301810.0_1675153677959_0.947492299534846"},"_hasShrinkwrap":false},"1.2302012254.0":{"name":"@bentoproject/soundcloud","version":"1.2302012254.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302012254.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"e4c14ac075b71415995f07a6bcc3ca93a8af5cc0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2302012254.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-nM47NIOjsiF3BmBONgzkj0WHS3DGm7GEUX1mEgvwFUVzg0oGxJdWxB3T64tMbyMjSCDx1hFLBHImmAdv0Ta6lQ==","shasum":"866d1bea57a1fe106836ccd3bb9c9aabd6be4f56","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2302012254.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClnfbm3NbMzZ/EO9nZtH5ksz1Xuiflr5gtJ2O74stuZwIhAOAwhBDdecCiCxZ9uYleo1Ridvl1IsJOfqE/Yv9Z+teA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj23OzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQaQ//TOMHAQSlpxf5bA/i1XsDKQau0w0C+aLqtLIqesSRrXky/1nB\r\n/Y0n0wtMAa+xDLkJHYrI5qhndjLvfyZrQWfcwkDyFWHLplhmP8QDYOqzAw2f\r\nULQpAO1ceq8cOm3/xhxxrn+mek5Cpo4jLGNXZTEBECWoCAdA2Gn+lAGwA4Qo\r\nBNGPFkcd0RPqAmsxU2maqRKFfPo7H74M3WNssSz0LJF678QUdGNpLCG+dNid\r\nohP5+edPMW0wwTD15tLo0tPLS/B87R6xmBP5aHybMK8UwHJ6DsYD+IU7X6Iy\r\ngTWRWRxjLIv5b6CF469G59yn11ZOIgKRvOmPHMcWmPCKgzFFf9p0IEy4kxk5\r\nMvXQRmEIFaVI9R7ybtR6Qb05OXFDuf+NfbhMHbHG8sgA3UH+yJJLvbngr44Z\r\nV9KhU02vxse99dFwXwU/ETe1iEUmShQbjatVPHFAd7CKOB+gEooubhg2pPnc\r\nY4CEa3yDxU9tEhrgM4iZWBIVjNhdyhBzeU0ZDLkYbkNBBDcwYut7lJYQ/uSy\r\nJvaS2fFx+d+LZaIAddgz1dsOdDB1/Z6csKqBmTQ7qPIEcF+Kbz5hUfcN4gXH\r\nupDx/nziueBFbtJBofTKPFb+ZBjDujOf26b4W3yISs9JRQqJxhKpN6Nk0zEm\r\ngEtgR/4ZYXCX53gEVniOUryA3OrN82hGrVY=\r\n=Gz5p\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2302012254.0_1675326387452_0.15009756176680145"},"_hasShrinkwrap":false},"1.2302021743.0":{"name":"@bentoproject/soundcloud","version":"1.2302021743.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302021743.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"a27cd72c15b628053806c94efc4c96730603dbd5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2302021743.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-+2wvmv0R7RxFgwuJqSpOyK/p1nYiPSBgr1OKUFPRCBQQ0zm4Dzn9RdXgYrWc+jMu1Mc6aoMGhrnghtmgq8/bYQ==","shasum":"4a37abaaeddc790d0fc7498478f837c63b2c515d","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2302021743.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsyRooReEXHIX+3PT8JtrWcC9dt7NtSspkoMPI1cmFXAiEAkm9x5leEsOUBqU6rO8RLqA7vxLu8NBIGFP3qv+4NYyg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3MWuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7IRAAnzWAWRKbBbbQlMgYKlDiaaeQPThJCSW+UFtmhj+YAS9+1VpQ\r\nSCKWGnxeZ6XPxTooSYsl/NUGLfMY9/Z6o3FTFfk1WzhUj8hf0c1QgaQp/3tq\r\nhVnCt6HDIq+KeZw0HhVO+e5s1BlodrDklMKQYt4SGA0A6mtzXuDPbgTs6Enh\r\nuhjrfFleloWym71sNDVXviO3fMkgEhsUEMjn3XRAUXscZ7EBW9spOs234YS9\r\nfyZ1DdemThD8gujrUwDRL4W2AoaUto1KPt7rdtflHzNYs28lVyUQTyQOontd\r\nKNQiEzn8GitXJISfcTCz4GZ2heTpoDjvnIP8mYmc4rDNf969kcYQ4MkzwRzg\r\nSnMZTXTtw4NEFRqgCUqB4O/AeNPIgykjDPIin/dYZhkgKj3qCWtodf/qpD25\r\nfmwNGR58O+1BYZUCbpj1keuGJ3CoX+ZyLQJ7Q91VvynqISmcgT9g6iXTnZ6K\r\nXO2hH+2otG/pRdBZmphZ2JuMu0Tmjmq47WJPThFuj14FsO/w9b87sNoS0QBC\r\nm2j2eZZWj2zQIYQKiycNhQahMB2QdNJpB3IxfP5Oed+ukyLhKvoX6+gOO3OC\r\nvpGjzH5AIJ4vBYPMwEg/oqRU9uZCwSME2wG9iwlLo9t6ucdAcZ+YDVg0niCa\r\nFsN2Xg49Q0GWYFBN4fleGDb+9f7wVqhW5D8=\r\n=gDQ9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2302021743.0_1675412909914_0.2871893517109212"},"_hasShrinkwrap":false},"1.2302031721.0":{"name":"@bentoproject/soundcloud","version":"1.2302031721.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/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/soundcloud@1.2302031721.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-03IwJ7RXlVG8EU4BfFVA2TctbD0pbhCuBTVv32IGNr6T3+znPanho7s9E2ACwnkPGtv85F61dfmCFPSTFg6kew==","shasum":"6a019a552ccf315ae5ce6291560bc845e77f54a4","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2302031721.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGcNQCBHrL2coHZ3HWecfc7zGTaylGY2GmIFjDAxTzRZAiAkvOPCp8Ql1u0xiKsFGgpm5ceMDPqq69Vz3YzSGMvYIw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3haJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGuBAAgkHexFcCr4ocTdFX/SHmIhMys1QCvmhazQMdWxaBjcl8kpNp\r\nZ7jk1QH3PHxTHXOnfK1McJRaxUEVAZmrJKkQ784sNe5O0igoWD3c4hsoZAul\r\ntD01vP509gwYmMWIe8ssTG22wo+xsGfKEeKdg+8FnNuvKFaxoGb+y821hUGp\r\nIn2MgCYN1SLX4pBVMU8URjd7LZQOzZ6zNVrKd4snFa3v1jRoJw73vfpxCg99\r\nJDcp14JzjXBQFa7IBGQgoQKg0/ShkUBfiI5RrslRsqw81ycgCtiFF28X16Ka\r\ndtx8huX1MIZNoa1vmIxnAWYwnxtL5VnRsY36DsN7iOfTTgVANDatAgK5He74\r\nkYX/faoXz+vIHXmrcoNzqV4X/ADMMUP8Zt0NVtA5nbYYexTHAkVtEkbt/C2t\r\nDu1tha7Qi7nyZKOawBudduURGdKi6+g5BCW11GaXW0pzN94xirMpsgGUWK4N\r\n73hJTe8XTBeVkpK/4r+vG2bvFQeuPMsZLKQRqkOVRVjtWZ979fuU19Ob6boQ\r\n/gYa8HAAPW90clBAqVuYoyJ/RBp3HNn4I9oVYBvTWuhte09AHNjLFI9BAuUI\r\n5FyYT5jdm5fWFAyTZLp8R4D7aRggdgvYFnWxEICLP1I0mfzV4TcmcIJaUPbn\r\n+lJ1n1mSPRmGUxR1h8B1/a0IPNMdcRy/sDQ=\r\n=ofla\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2302031721.0_1675499145083_0.030974589439004774"},"_hasShrinkwrap":false},"1.2302171719.0":{"name":"@bentoproject/soundcloud","version":"1.2302171719.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302171719.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"767b9ceecbb9759948c2b0db6f66c49097659f98","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2302171719.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-CCzmHNO7FGtFDbLHelf2Dd23kOQzN6r1ZH5nlpPaxPMzrCnWiXISM5/kcFQIUWjSq1rL4+AENHihq76wO8H0eg==","shasum":"03e9cc0747f88de35da0dd218fd9f84570c4f873","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2302171719.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFcZ+0gW6SsJrd2sHKafKJ7mFGB32Ba44WuzaexxyD4eAiB+L7LN94tCRmTRqFWiw2fEJ6TCodyP5BUZzpR+GFykcQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8ItPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSWw//ST1e+9j/YTY5RCC3wqz1tAHMM9QGQUxfGri63x/BPMK2+oX4\r\nYm0lYOt+nX361cYLnFTivQg4t/Uor7zhVNa/eWUs5OhcenZCWRsimWGJKdBb\r\nB9v/q2vKTB7+CbtWmEDZ6VRUqc2MMW6B9DU3i2t8uj0fyZ+dfBvjrtrlLWqx\r\nFTO7fjEpKXlHbG/5iErc9uMF1ALnXimq86Zp0BGOcZYA1DYqUiZBNZ179kT4\r\n509cmK5IyVfoCvOyMdv266c4ky9I8pZTAdnVFfbeUM1/WVg/hhVczzkTDoxH\r\nUrLt4drydUrYVRAE6sJV3WdJECwzq+kVd1r+JT6ZCC6+VTLqnQ0LUA9OgouY\r\ntPUNe1+m0ZozEcyGBSNIk1D5TWGtAfNDz0GkPgOQMNaV8x9XwQAfZqJ+4hEI\r\nrR/RhnPnAtugvPc5ZiRyD42jhK7zgZBcx+ya+TFT8xum2KoJSV5EZ5NwA4CD\r\nY/xJhobHZSzmEhY+oF8IffggQfc2jjfve9CibHGkexsvaMT5yl0qShLsUpyN\r\nQIJRyF4K9Vk8GRtwLhN2Tu6nNnAlN36vvssiSi55z4Fdk/oOvmhaH8BTFUov\r\n/F6wJesTcKaqdTlz2Zj3Gb5yVK4cHMViwKy7EdS+lsDGhLmbWC2FM4odTKEd\r\nnGC6jaxsXb5XLbNLhvPFnD6jCPhaKWtlghc=\r\n=6veA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2302171719.0_1676708687451_0.9671551690273363"},"_hasShrinkwrap":false},"1.2302271541.0":{"name":"@bentoproject/soundcloud","version":"1.2302271541.0","description":"Embeds a Soundcloud clip.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302271541.0"},"readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md","gitHead":"13cfe7f4354a82bebe08fd29496c4c7de848a18b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/soundcloud@1.2302271541.0","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-fN8581t1H/emfd09svu4R3xRXavxzugpkIb4dEgZ7Sk2fRDLCMNue4eUf3Ry5+aPKga/Cdl3zwmKxSzFZ2aV+Q==","shasum":"3bf39b8e5bffb87aa25f92d182d965834c9916b4","tarball":"https://registry.npmjs.org/@bentoproject/soundcloud/-/soundcloud-1.2302271541.0.tgz","fileCount":29,"unpackedSize":552438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFaNrOmCecFXRBQct1Px7TA3aBpctZnT4nva5fUaBK3WAiAOi1PzPn8PiGWkoL+aSyIYLrfYjug/K72KuJElEJEcyQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/jlIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRBhAAg7rWPnloRCchrLrX2Bni2Xs8NkmDAQd9TG/v0lZF5wisbz1g\r\nMoA/U5BeFUdYajMJiF41yRecI3Y4I36oBroSCG1+6VVzpOp2U5pUpZd9VtiF\r\nN04yBvGXNlIdKB8f/nPeYxFPo6eaJFrPdyHXU5qDL8H1GbhkVpWIHgI3MW0D\r\nvmhmeK3TgSEWCiTjNyGjb8Uyq0Ip/ILYm2673iGKVopTN+vuJlMWG+gTCDl+\r\n8PmZAxTCwsgNExFWIO+DsWbMLFesLq6ncErhsqvkwF2XVMl4oifWqefJhDeH\r\ng0xMK1ggRYZ/gMfmbaqCiF6GwmvI7vNfHwrxxy70JIUrCOb5SgBYAEDs4pEL\r\ngZGKnFzG3x6AGPD2a2JP7Hx9K0KnRR86/ZbrQ0m7HmUxgPx4trj7q9Iq15iM\r\n8MPYK4k4Devjf+AfLaLqcipDm5NAuD/BTa8k6A6HDKrKtqDgEGnJmm7gb7CR\r\nIAwi19uy4sIFl9PYCWCgG4D5qj5aiwERUgUdCdCnERQ/0LUgu3Aw7r7ngVzk\r\nkdOQQUlXXsIZTtU72PtQIjrZmwu7dd+DDknH0ez2Kt7pXu0dxA+w/IU3WJ3z\r\nq6E4HFNm3A/AyQaj+iPeUONpEio0uYhCcGvE/51F0Dg6gqDuZzjcnnBDcbAK\r\ndRrVcNQJL19TlTp8S44WKat6I3hVD+FFiWk=\r\n=yJz5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/soundcloud_1.2302271541.0_1677605191857_0.9543647417198406"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-28T18:17:24.969Z","1.2110261518.0":"2021-10-28T18:17:25.197Z","modified":"2023-03-07T18:44:03.428Z","1.2110252343.0":"2021-10-28T21:47:33.048Z","1.2110281959.0":"2021-10-29T11:51:36.751Z","1.2110290545.0":"2021-10-30T11:21:09.732Z","1.2111011823.0":"2021-11-02T11:24:58.470Z","1.2110152252.3":"2021-11-02T22:03:50.767Z","1.2110212130.2":"2021-11-02T22:14:28.184Z","1.2111022043.0":"2021-11-03T11:21:18.439Z","1.2111180040.0":"2021-11-18T21:30:44.042Z","1.2111060251.3":"2021-11-18T21:45:54.268Z","1.2111182332.0":"2021-11-19T12:24:45.606Z","1.2111060251.9":"2021-11-19T16:31:34.620Z","1.2111191951.0":"2021-11-20T12:23:43.783Z","1.2111230244.0":"2021-11-23T12:24:41.932Z","1.2111230636.0":"2021-11-24T12:22:34.675Z","1.2111242025.0":"2021-11-25T12:42:22.702Z","1.2111292120.0":"2021-11-30T12:41:32.727Z","1.2111152338.2":"2021-11-30T17:54:46.047Z","1.2112010058.0":"2021-12-01T12:19:11.635Z","1.2112012300.0":"2021-12-02T12:31:04.131Z","1.2112021656.0":"2021-12-03T12:22:07.859Z","1.2112032204.0":"2021-12-04T12:19:50.490Z","1.2112062322.0":"2021-12-07T12:27:03.339Z","1.2112062322.2":"2021-12-07T22:30:46.706Z","1.2112080230.0":"2021-12-08T13:21:58.317Z","1.2112080230.1":"2021-12-08T15:59:25.640Z","1.2112082232.0":"2021-12-09T12:45:18.001Z","1.2111242025.1":"2021-12-10T00:11:09.526Z","1.2112091956.0":"2021-12-10T12:46:07.535Z","1.2112102136.0":"2021-12-11T12:31:24.976Z","1.2112132331.0":"2021-12-14T12:59:34.725Z","1.2112160003.0":"2021-12-16T12:19:44.574Z","1.2112162055.0":"2021-12-17T12:18:17.797Z","1.2112170012.0":"2021-12-18T12:17:44.166Z","1.2112201724.0":"2021-12-21T12:21:46.516Z","1.2112212349.0":"2021-12-22T12:23:43.780Z","1.2112221739.0":"2021-12-23T12:18:46.935Z","1.2112231523.0":"2021-12-24T12:20:43.810Z","1.2201042109.0":"2022-01-05T12:31:22.173Z","1.2201052144.0":"2022-01-06T12:41:23.588Z","1.2201061922.0":"2022-01-07T12:32:31.316Z","1.2201071715.0":"2022-01-08T12:21:58.904Z","1.2201101902.0":"2022-01-11T12:29:38.826Z","1.2112231523.1":"2022-01-11T19:27:02.353Z","1.2201120015.0":"2022-01-12T12:31:09.163Z","1.2112231523.2":"2022-01-12T22:41:16.288Z","1.2201122239.0":"2022-01-13T13:01:04.856Z","1.2201131702.0":"2022-01-14T13:06:01.684Z","1.2201141909.0":"2022-01-15T12:23:18.641Z","1.2201141909.1":"2022-01-25T19:49:29.388Z","1.2201141909.3":"2022-01-26T20:59:54.905Z","1.2201141909.4":"2022-02-01T21:38:25.226Z","1.2201212122.3":"2022-02-02T18:00:59.540Z","1.2202012258.0":"2022-02-02T19:13:04.066Z","1.2202022130.0":"2022-02-03T16:58:11.952Z","1.2202031816.0":"2022-02-04T15:47:01.827Z","1.2202042210.0":"2022-02-05T09:18:13.809Z","1.2202072236.0":"2022-02-08T09:20:34.870Z","1.2201262038.1":"2022-02-08T21:12:54.188Z","1.2202082004.0":"2022-02-09T22:16:22.871Z","1.2202092050.0":"2022-02-10T17:59:11.362Z","1.2202112230.0":"2022-02-14T21:06:24.030Z","1.2202142035.0":"2022-02-15T09:25:10.933Z","1.2202042210.1":"2022-02-15T18:23:34.646Z","1.2202152253.0":"2022-02-16T09:08:32.812Z","1.2202162256.0":"2022-02-17T09:31:35.482Z","1.2202180255.0":"2022-02-18T09:44:43.960Z","1.2202230359.0":"2022-02-23T09:29:47.048Z","1.2202232232.0":"2022-02-24T15:22:51.510Z","1.2202241911.0":"2022-02-25T15:18:02.517Z","1.2202252101.0":"2022-02-28T16:46:12.028Z","1.2202230359.1":"2022-03-01T22:05:54.878Z","1.2203041950.0":"2022-03-15T18:37:51.943Z","1.2203151539.0":"2022-03-16T08:23:35.655Z","1.2203172113.0":"2022-03-18T08:25:00.775Z","1.2203221937.0":"2022-03-23T08:27:16.354Z","1.2203231914.0":"2022-03-24T08:25:21.022Z","1.2203101844.0":"2022-03-24T20:11:45.450Z","1.2203281422.0":"2022-03-29T08:30:24.728Z","1.2204121632.0":"2022-04-12T18:17:16.836Z","1.2204122000.0":"2022-04-13T08:32:46.813Z","1.2204132005.0":"2022-04-14T08:35:16.241Z","1.2204142048.0":"2022-04-15T08:28:27.246Z","1.2204160405.0":"2022-04-16T08:25:34.269Z","1.2204182206.0":"2022-04-19T08:31:45.074Z","1.2204191429.0":"2022-04-20T08:33:37.046Z","1.2204211736.0":"2022-04-22T08:27:25.358Z","1.2204221712.0":"2022-04-23T08:27:10.461Z","1.2204252045.0":"2022-04-26T08:32:50.440Z","1.2204272205.0":"2022-04-28T08:32:56.397Z","1.2204281949.0":"2022-04-29T08:29:06.520Z","1.2204292129.0":"2022-04-30T08:26:50.154Z","1.2205031420.0":"2022-05-04T08:27:52.222Z","1.2205041533.0":"2022-05-05T08:27:34.663Z","1.2205051832.0":"2022-05-06T08:27:57.765Z","1.2205090810.0":"2022-05-10T08:33:50.831Z","1.2205101904.0":"2022-05-11T08:33:22.908Z","1.2205120110.0":"2022-05-12T08:32:39.817Z","1.2205161914.0":"2022-05-17T08:27:56.544Z","1.2205181800.0":"2022-05-19T08:28:10.979Z","1.2205191749.0":"2022-05-20T08:28:25.789Z","1.2205232225.0":"2022-05-24T08:27:57.331Z","1.2205120110.1":"2022-05-24T19:14:16.421Z","1.2205251942.0":"2022-05-26T08:28:20.919Z","1.2205270638.0":"2022-05-27T08:28:38.697Z","1.2206071918.0":"2022-06-07T22:29:02.477Z","1.2206072228.0":"2022-06-08T08:28:35.963Z","1.2206082301.0":"2022-06-09T08:32:44.602Z","1.2205270638.4":"2022-06-10T21:36:11.653Z","1.2206101637.0":"2022-06-11T08:27:46.415Z","1.2206131450.0":"2022-06-14T08:29:30.138Z","1.2206071918.1":"2022-06-14T21:28:22.805Z","1.2206162023.0":"2022-06-17T08:28:49.880Z","1.2206221455.0":"2022-06-23T08:28:42.564Z","1.2206291614.0":"2022-06-30T16:09:22.640Z","1.2207071723.0":"2022-07-08T08:35:24.176Z","1.2207181727.0":"2022-07-19T08:27:49.725Z","1.2207201724.0":"2022-07-21T08:28:28.030Z","1.2207221643.0":"2022-07-23T08:28:21.401Z","1.2207261725.0":"2022-07-27T08:27:23.654Z","1.2207281718.0":"2022-07-29T08:31:08.406Z","1.2208021808.0":"2022-08-03T08:28:34.273Z","1.2208042017.0":"2022-08-05T08:30:16.120Z","1.2208051912.0":"2022-08-06T08:29:09.857Z","1.2208081650.0":"2022-08-09T08:29:25.794Z","1.2208092047.0":"2022-08-10T08:28:57.958Z","1.2207281718.1":"2022-08-10T16:59:38.574Z","1.2207281718.2":"2022-08-10T18:17:45.206Z","1.2208112015.0":"2022-08-12T08:29:46.099Z","1.2208121708.0":"2022-08-13T08:28:10.747Z","1.2208051912.1":"2022-08-16T23:07:16.072Z","1.2208172101.0":"2022-08-24T20:57:22.199Z","1.2208242209.0":"2022-08-25T08:28:31.371Z","1.2209072154.0":"2022-09-08T08:26:40.796Z","1.2209131909.0":"2022-09-14T08:46:05.248Z","1.2208242209.1":"2022-09-15T16:44:22.815Z","1.2209142312.0":"2022-09-20T22:09:31.667Z","1.2210010655.0":"2022-10-04T16:50:46.677Z","1.2210041838.0":"2022-10-05T08:31:41.409Z","1.2210052034.0":"2022-10-06T08:27:19.842Z","1.2210071758.0":"2022-10-08T08:26:51.360Z","1.2210112333.0":"2022-10-12T08:26:08.316Z","1.2210142102.0":"2022-10-15T08:25:49.860Z","1.2210172057.0":"2022-10-18T08:29:05.288Z","1.2210191347.0":"2022-10-20T08:26:43.205Z","1.2210211855.0":"2022-10-22T08:24:55.513Z","1.2210251605.0":"2022-10-26T08:29:29.390Z","1.2210272257.0":"2022-10-28T08:28:03.512Z","1.2211042305.0":"2022-11-05T08:25:48.810Z","1.2211060024.0":"2022-11-08T08:27:30.484Z","1.2211111611.0":"2022-11-12T08:25:44.293Z","1.2211151402.0":"2022-11-16T18:48:24.685Z","1.2211182146.0":"2022-11-19T08:27:53.889Z","1.2211250451.0":"2022-11-25T08:26:32.655Z","1.2211302304.0":"2022-12-01T08:25:51.303Z","1.2212071834.0":"2022-12-07T19:39:59.418Z","1.2212092023.0":"2022-12-10T08:26:34.580Z","1.2211302304.1":"2022-12-13T21:54:31.527Z","1.2212151632.0":"2022-12-20T15:54:01.519Z","1.2212151632.1":"2022-12-20T20:11:36.879Z","1.2211302304.2":"2022-12-20T22:34:35.901Z","1.2212151632.2":"2023-01-03T18:14:18.067Z","1.2301031703.0":"2023-01-03T20:31:51.292Z","1.2301032153.0":"2023-01-04T08:26:37.274Z","1.2301041800.0":"2023-01-05T08:27:23.144Z","1.2301100345.0":"2023-01-10T08:27:35.347Z","1.2301112346.0":"2023-01-12T08:29:09.379Z","1.2301181928.0":"2023-01-19T08:27:36.363Z","1.2301261900.0":"2023-01-27T08:29:09.438Z","1.2301301810.0":"2023-01-31T08:27:58.339Z","1.2302012254.0":"2023-02-02T08:26:27.621Z","1.2302021743.0":"2023-02-03T08:28:30.164Z","1.2302031721.0":"2023-02-04T08:25:45.373Z","1.2302171719.0":"2023-02-18T08:24:47.746Z","1.2302271541.0":"2023-02-28T17:26:32.095Z"},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"description":"Embeds a Soundcloud clip.","homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-soundcloud/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-soundcloud/1.0"},"author":{"name":"Bento Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"# Bento Soundcloud\n\nEmbeds a [Soundcloud](https://soundcloud.com) clip.\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/soundcloud\n```\n\n```javascript\nimport {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';\ndefineBentoSoundcloud();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-soundcloud {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-soundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-soundcloud {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\nProgrammatically changing one of the attributes will result in the player being automatically updated.\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js\"\n    ></script>\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css\"\n    />\n    <style>\n      bento-soundcloud {\n        width: 300px;\n        height: 300px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-soundcloud\n      id=\"my-track\"\n      data-trackid=\"89299804\"\n      data-visual=\"true\"\n    ></bento-soundcloud>\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-track\">Change track</button>\n    </div>\n\n    <script>\n      (async () => {\n        const soundcloud = document.querySelector('#my-track');\n        await customElements.whenDefined('bento-soundcloud');\n\n        // set up button actions\n        document.querySelector('#change-track').onclick = () => {\n          soundcloud.setAttribute('data-trackid', '243169232');\n          soundcloud.setAttribute('data-color', 'ff5500');\n          soundcloud.removeAttribute('data-visual');\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n##### data-track\n\nThis attribute is required if <code>data-playlistid</code> is not defined. The value for this attribute is the ID of a track, an integer.\n\n##### data-playlistid\n\nThis attribute is required if <code>data-trackid</code> is not defined. The value for this attribute is the ID of a playlist, an integer.\n\n##### data-secret-token (optional)\n\nThe secret token of the track, if it is private.\n\n##### data-visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### data-color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/soundcloud\n```\n\n```javascript\nimport React from 'react';\nimport {BentoSoundcloud} from '@bentoproject/soundcloud/react';\nimport '@bentoproject/soundcloud/styles.css';\n\nfunction App() {\n  return <BentoSoundcloud trackId=\"243169232\" visual={true}></BentoSoundcloud>;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoSoundcloud` 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 (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoSoundcloud\n  style={{width: 300, height: 100}}\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\nOr via `className`:\n\n```jsx\n<BentoSoundcloud\n  className=\"custom-styles\"\n  trackId=\"243169232\"\n  visual={true}\n></BentoSoundcloud>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### trackId\n\nThis attribute is required if <code>data-playlistid</code> is not defined.\nThe value for this attribute is the ID of a track, an integer.\n\n##### playlistId\n\nThis attribute is required if <code>data-trackid</code> is not defined.\nThe value for this attribute is the ID of a playlist, an integer.\n\n##### secretToken (optional)\n\nThe secret token of the track, if it is private.\n\n##### visual (optional)\n\nIf set to <code>true</code>, displays full-width \"Visual\" mode; otherwise, it displays as \"Classic\" mode. The default value is <code>false</code>.\n\n##### color (optional)\n\nThis attribute is a custom color override for the \"Classic\" mode. The attribute is ignored in \"Visual\" mode. Specify a hexadecimal color value, without the leading # (e.g., <code>data-color=\"e540ff\"</code>).\n","readmeFilename":"README.md"}